$("#draggable").draggable();

$("#draggable").draggable({
    containment: "parent" // 限制在父元素内拖动
    // 或者指定具体区域
    // containment: [x1, y1, x2, y2]
});

$("#draggable").draggable({
    grid: [50, 50] // 每50px捕捉一次
});

$("#draggable").draggable({
    snap: ".snap-target", // 捕捉到指定元素
    snapMode: "outer", // 捕捉模式：inner/outer/both
    snapTolerance: 20 // 捕捉容差(px)
});

.draggable-element {
    position: absolute; /* 或 relative */
}

.container {
    position: relative;
    width: 500px;
    height: 300px;
}

$("#draggable").draggable({
    snapTolerance: 30 // 增大容差值
});

$("#draggable").draggable({
    drag: function(event, ui) {
        // 自定义捕捉逻辑
        var snapPositions = [{x:100, y:100}, {x:200, y:200}];
        snapPositions.forEach(function(pos) {
            if (Math.abs(ui.position.left - pos.x) < 20 && 
                Math.abs(ui.position.top - pos.y) < 20) {
                ui.position.left = pos.x;
                ui.position.top = pos.y;
            }
        });
    }
});

$("#draggable").draggable({
    revert: "invalid", // 无效放置时返回原处
    snap: ".droppable",
    snapTolerance: 30
});

$(".droppable").droppable({
    drop: function(event, ui) {
        // 放置后的处理逻辑
    }
});