使用jQuery写一个简单的拖拽案例

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_43316300/article/details/84060842

这个案例主要运用到几个jQuery简单的函数嵌套在一起;
相当好理解;
当你在使用时一定要将jQuery的文件引用到该代码中

<script>
//循环创建div,可以在这修改样式;但是position:absolute不可修改;
for(var =0;i<30;i++){
   $("<div></div>").appendTo("body").css("backgroundColor","blue").css("position","absolute")
   .width(100).height(100).mousedown(drag);
}
//拖拽函数
function drag(e){
   var point={x:e.offsetX,y:offsetY};
   var div=$(this);
   $(this).one("mouseup",function(e){
      $(document).off("mousemove");
   });
   $(document).mousemove(function(e){
      div.css({
         left:e.clientX-point.x+"px",
         top:e.clientY-point.y+"px"
      })
   })
}
</script>

点赞评论,谢谢支持