js 드래그(클릭+이동)

3476 단어
이중 함수: 클릭 이벤트 + 마우스 이동 이벤트

<html>
<head>
    <meta charset="utf-8">
    <title>title>
    <style type="text/css">
        #bar{
            position: relative;
            float: left;
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    style>
head>
<body>
<div id="bar">div>
<script type="text/javascript">
     bar.onmousedown = function(event){
        var bar=document.getElementById("bar");
        var rex=event.clientX-bar.offsetLeft;
        var rey=event.clientY-bar.offsetTop;
            document.onmousemove = function(e){ 
                xX=e.clientX;
                yY=e.clientY;
                bar.style.left=(xX-rex)+"px";
                bar.style.top=(yY-rey)+"px";
            }
}
document.onmouseup=function(){
    document.onmousemove=null;
  }

script>
body>
html>

좋은 웹페이지 즐겨찾기