JS拖拽效果详解编程语言

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>

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/10057.html

JS拖拽效果详解编程语言

相关推荐

发表回复