jquery拖拽效果完整实例(附demo源码下载)

下面是详细讲解“jquery拖拽效果完整实例(附demo源码下载)”的攻略：

1. 简介

此篇攻略是介绍如何使用 jQuery 实现拖拽效果的教程，旨在帮助初学者理解 jQuery 中的基本操作和拖拽效果的实现细节。完整实例中所用的 demo 源码下载资源需要自行查找并下载。

2. 操作步骤

步骤一：引入样式表和脚本

首先，在 HTML head 标签中引入样式表和 jQuery 脚本：

<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

步骤二：创建元素并设置样式

然后，我们创建一个 div 元素，并设置它的样式：

<body>
    <div id="drag" class="drag">拖我拖我</div>
</body>

.drag {
    width: 80px;
    height: 80px;
    background-color: #f00;
    color: #fff;
    text-align: center;
    line-height: 80px;
    border-radius: 50%;
    cursor: move;
}

步骤三：绑定拖拽事件

接下来，我们通过 jQuery 将拖拽事件绑定到这个 div 元素上：

$('#drag').mousedown(function(event) {
    var startX = event.clientX;
    var startY = event.clientY;

    var dragElement = $(this).get(0); // 当前需要拖拽的元素

    var startLeft = parseInt(dragElement.style.left) || 0;
    var startTop = parseInt(dragElement.style.top) || 0;

    var disX = startX - startLeft;
    var disY = startY - startTop;

    $(document).mousemove(function(event) {
        var endX = event.clientX;
        var endY = event.clientY;

        var left = endX - disX;
        var top = endY - disY;

        dragElement.style.left = left + 'px';
        dragElement.style.top = top + 'px';
    });

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

解析：
- 上面的代码中，我们为 div 元素添加了鼠标按下事件处理函数（mousedown），在该处理函数中，我们获取鼠标按下时的位置，并记录当前 div 元素的当前位置；
- 接下来，我们为整个文档添加鼠标移动事件处理函数（mousemove），在该处理函数中，我们获取当前鼠标位置，计算出 div 元素应该移动的距离，并调整 div 元素的 left 和 top 样式，实现了拖拽效果；
- 最后，我们为整个文档添加鼠标松开事件处理函数（mouseup），在该处理函数中关闭鼠标移动事件处理函数，终止拖拽效果。

步骤四：完成

好了，到此为止，我们就实现了用 jQuery 实现拖拽效果的基本操作，整个实例代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery拖拽效果完整实例</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="drag" class="drag">拖我拖我</div>
    <script>
        $('#drag').mousedown(function(event) {
            var startX = event.clientX;
            var startY = event.clientY;

            var dragElement = $(this).get(0); // 当前需要拖拽的元素

            var startLeft = parseInt(dragElement.style.left) || 0;
            var startTop = parseInt(dragElement.style.top) || 0;

            var disX = startX - startLeft;
            var disY = startY - startTop;

            $(document).mousemove(function(event) {
                var endX = event.clientX;
                var endY = event.clientY;

                var left = endX - disX;
                var top = endY - disY;

                dragElement.style.left = left + 'px';
                dragElement.style.top = top + 'px';
            });

            $(document).mouseup(function() {
                $(this).off('mousemove');
            });
        });
    </script>
</body>
</html>

3. 示例说明

示例一：实现拖拽只在固定区域内

有些时候，我们希望拖拽只在固定区域内进行，这个时候，我们可以新增一个 div 元素作为限制区域，并将拖拽元素放入该区域中。

下面是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery拖拽效果完整实例</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="wrap">
        <div class="drag-wrap">
            <div id="drag" class="drag">拖我拖我</div>
        </div>
    </div>
    <script>
        $('#drag').mousedown(function(event) {
            var startX = event.clientX;
            var startY = event.clientY;

            var dragElement = $(this).get(0); // 当前需要拖拽的元素

            var startLeft = parseInt(dragElement.style.left) || 0;
            var startTop = parseInt(dragElement.style.top) || 0;

            var disX = startX - startLeft;
            var disY = startY - startTop;
            var maxX = $('.drag-wrap').get(0).offsetWidth - dragElement.offsetWidth;
            var maxY = $('.drag-wrap').get(0).offsetHeight - dragElement.offsetHeight;

            $(document).mousemove(function(event) {
                var endX = event.clientX;
                var endY = event.clientY;

                var left = endX - disX;
                var top = endY - disY;

                left = left < 0 ? 0 : (left > maxX ? maxX : left);
                top = top < 0 ? 0 : (top > maxY ? maxY : top);

                dragElement.style.left = left + 'px';
                dragElement.style.top = top + 'px';
            });

            $(document).mouseup(function() {
                $(this).off('mousemove');
            });
        });
    </script>
</body>
</html>

示例二：实现拖拽松手自动吸附到指定位置

有时候，我们希望在拖拽松手后，元素自动吸附到指定位置，实现类似拖拽排序的效果。