jquery实现简单的div拖拽

Html

Css

$(function() {
     //样式
     $("#drag").css({
         "position": "absolute",
         "top": "100px",
         "left": "100px",
         "border": "1px solid #789",
         "width": "150px",
         "height": "90px",
         "background": "#988f82",
         "cursor": "move"
     })

/*+++++ 拖曳效果 ++++++
      *原理：标记拖曳状态dragging ,坐标位置iX, iY
      *         mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获}
      *         mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}
      *         mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡}
      */
     var dragging = false;
     var iX, iY;

$("#drag").mousedown(function(e) {
         dragging = true;
         iX = e.clientX - this.offsetLeft;
         iY = e.clientY - this.offsetTop;
         this.setCapture && this.setCapture();
         return false;
     });

$(document).mouseup(function(e) {
         dragging = false;
         $("#drag")[0].releaseCapture();
         e.cancelBubble = true;
     })

})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3

立即下载

jquery实现简单的div拖拽



代码描述：原理js特效实例div拖拽

更新时间：2019-09-07 22:05:16

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

张文俊

相关代码

jquery实现简单的div拖拽

最新