当前位置：首页 > jquery

jquery拖拽

2026-04-07 23:58:29jquery

使用 jQuery 实现拖拽功能

jQuery 本身不直接提供拖拽功能，但可以通过其事件系统结合鼠标事件实现拖拽效果。以下是实现拖拽的几种方法：

基础拖拽实现

$(document).ready(function() {
    var isDragging = false;
    var offsetX, offsetY;

    $("#draggable-element").mousedown(function(e) {
        isDragging = true;
        offsetX = e.clientX - $(this).offset().left;
        offsetY = e.clientY - $(this).offset().top;
    });

    $(document).mousemove(function(e) {
        if (!isDragging) return;
        $("#draggable-element").css({
            left: e.clientX - offsetX,
            top: e.clientY - offsetY
        });
    });

    $(document).mouseup(function() {
        isDragging = false;
    });
});

使用 jQuery UI 拖拽

jQuery UI 提供了更完善的拖拽功能，需要先引入 jQuery UI 库：

$(document).ready(function() {
    $("#draggable-element").draggable({
        containment: "parent", // 限制在父元素内拖动
        cursor: "move",       // 拖动时鼠标样式
        opacity: 0.7,         // 拖动时透明度
        revert: "invalid"     // 无效放置时返回原位
    });
});

拖拽排序实现

jQuery UI 还支持拖拽排序功能：

$(document).ready(function() {
    $("#sortable-list").sortable({
        placeholder: "ui-state-highlight", // 占位符样式
        axis: "y",                        // 限制Y轴拖动
        update: function() {              // 排序更新回调
            console.log("顺序已改变");
        }
    });
    $("#sortable-list").disableSelection();
});

自定义拖拽事件

如果需要更复杂的拖拽控制，可以结合 jQuery UI 的事件系统：

$(document).ready(function() {
    $("#draggable-element").draggable({
        start: function() {
            console.log("拖动开始");
        },
        drag: function() {
            console.log("拖动中");
        },
        stop: function() {
            console.log("拖动结束");
        }
    });
});

拖拽限制区域

限制元素只能在特定区域内拖动：

jquery拖拽

$(document).ready(function() {
    $("#draggable-element").draggable({
        containment: "#container", // 限制在#container元素内
        scroll: false              // 禁止拖动时滚动
    });
});