首页
前端开发
Javascript
jQuery轻量拖拽功能实现

jQuery轻量拖拽功能实现

0 次浏览 0 条评论
html
html

jQuery 的拖拽功能代码，简洁到只有几十行，写起来不累、改起来也顺手。完全基于jQuery实现，没掺杂别的库，纯粹，干净，适合喜欢轻量方案的你。

网上虽然一大堆拖拽效果的代码，但要么依赖原生 JS 多，要么逻辑写得乱七八糟。这段代码不一样，结构清爽，逻辑也清楚，而且修复了一些常见的小 bug，比如拖拽中鼠标偏移不准的问题。

你只需要在 DOM 元素上绑定mousedown事件，监听mousemove和mouseup，就能实现比较丝滑的拖动体验。下面是个大致结构：

$('.drag-box').mousedown(function(e) {
  var offsetX = e.offsetX;
  var offsetY = e.offsetY;
  $(document).mousemove(function(e) {
    $('.drag-box').css({
      left: e.pageX - offsetX,
      top: e.pageY - offsetY
    });
  }).mouseup(function() {
    $(document).off('mousemove mouseup');
  });
});

适合做后台管理面板的小组件、弹窗、甚至小游戏里的物体拖动。用起来简单，适配性也不错。如果你更想追求零 bug 的拖拽实现，可以顺手看看js 拖拽完美无 bug 版，也是不错的补充。

还有一点提醒：这段代码虽然用的是jQuery，但最好是配合position: absolute的元素使用，拖动时才不会乱位。

html 文件大小：1.04KB