jQuery实现的简单拖拽功能示例【测试可用】

下面是“jQuery实现的简单拖拽功能示例【测试可用】”的完整攻略。

一、示例说明

该示例通过使用 jQuery 配合 HTML 和 CSS ，实现了简单的拖拽功能，即将鼠标按下的元素拖动到指定区域。该示例包含两个实现方式，分别为：

1. 拖拽一个固定在页面中央的方块到指定区域。
2. 拖拽一个动态生成的方块到指定区域，该方块可以无限创建和拖拽。

二、实现步骤

1. 准备HTML和CSS

示例中需要先创建一个方块，并将其设置为绝对定位，位置为页面中央，如下所示：

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

对应的 CSS 样式如下：

#box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. 实现拖拽功能

方式一：拖拽一个固定的方块

首先，需要绑定鼠标按下事件和鼠标移动事件。鼠标按下时需要获取到鼠标相对于页面的坐标，以及被拖拽元素相对于页面的坐标。

var box = document.getElementById('box');
var disX = 0;
var disY = 0;
box.onmousedown = function(e) {
  var event = e || window.event;
  disX = event.clientX - box.offsetLeft;
  disY = event.clientY - box.offsetTop;
  document.onmousemove = function(e) {
    var event = e || window.event;
    box.style.left = event.clientX - disX + 'px';
    box.style.top = event.clientY - disY + 'px';
  }
}

以上代码通过获取鼠标按下时的坐标，以及被拖拽元素的偏移量，计算出元素当前应该的位置。

方式二：拖拽一个动态生成的方块

这个示例需要使用到 jQuery ,我们首先需要在 HTML 中引入 jQuery 库。

1. 动态生成方块

$('#addBox').click(function() {
  var div = $('<div></div>').addClass('item');
  $('body').append(div);
})

通过点击“addBox”按钮，动态生成一个类名为 "item" 的 div 元素，并将其添加到页面上。

1. 实现拖拽功能

$(document).on('mousedown', '.item', function(e) {
  var event = e || window.event;
  var disX = event.pageX - $(this).offset().left;
  var disY = event.pageY - $(this).offset().top;
  $(document).on('mousemove', function(e) {
    var event = e || window.event;
    $('.item').css({
      'left': event.pageX - disX + 'px',
      'top': event.pageY - disY + 'px'
    })
  })
})

$(document).on('mouseup', function() {
  $(document).off('mousemove');
})

以上代码通过委托方式绑定 mousedown 和 mousemove 事件，在鼠标按下时获取到鼠标的坐标，以及被拖拽物品相对于页面的坐标，然后计算出物品应该的位置，并对所有的类名为 "item" 的元素进行位置修改。在鼠标抬起时，解除拖拽效果。

三、结语

通过以上的步骤我们就能够创建出简单的拖拽功能。当然，这只是一个简单的示例，实际中会遇到更多需要处理的问题，例如限制边界、与其他元素的碰撞检测，需要根据具体需求进行优化和改进。