JS拖拽效果

ecn5 9年前發布 | 2K 次閱讀 JavaScript

JS拖拽效果，得到鼠標事件，可拓展功能，改變元素的寬和高！

<!DOCTYPE html>


<html>


<head>



<meta charset="UTF-8">

<title></title>

<style>

    div{

    margin-top: 10px;

    width: 200px;

    height: 150px;

    background: #dadada;

    position: absolute;

    cursor:move;

    }


</style>





</head>


<body>


<div id="div" ></div>


<script>



    var drag=false;

    var x, y,movex,movey;

    var movediv  =document.getElementById('div');

    movediv.onmousedown=function(){

          drag=false;

          x = window.event.clientX;  /*當前鼠標坐標*/

          y =window.event.clientY;

         movex = movediv.offsetLeft;  /*當前元素坐標*/

         movey =movediv.offsetTop

    }

document.onmousemove=function(){

    if(drag) return false;

    movediv.style.top= movey +  window.event.clientY  -y +'px';

    movediv.style.left=  movex  +  window.event.clientX  -x  +'px';

}




document.onmouseup=function(){drag=true}


</script>


</body>


</html></pre>
 本文由用戶 ecn5 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！