$("#draggable").draggable({
    // 确保拖动元素有正确的定位
    start: function(event, ui) {
        $(this).css({
            position: "relative",
            margin: 0,
            padding: 0
        });
    }
});

$("#draggable").draggable({
    helper: "clone",
    start: function(event, ui) {
        // 确保克隆元素与原元素位置一致
        ui.helper.css({
            position: "absolute",
            left: $(this).position().left,
            top: $(this).position().top
        });
    }
});

$("#draggable").draggable({
    containment: "parent",
    // 确保容器位置计算正确
    refreshPositions: true
});

$("#draggable").draggable({
    // 补偿 transform 带来的偏移
    start: function(event, ui) {
        var offset = $(this).offset();
        var transformOffset = {
            left: offset.left - parseInt($(this).css('left')) || 0,
            top: offset.top - parseInt($(this).css('top')) || 0
        };
        $(this).data('transformOffset', transformOffset);
    },
    drag: function(event, ui) {
        var transformOffset = $(this).data('transformOffset');
        ui.position.left -= transformOffset.left;
        ui.position.top -= transformOffset.top;
    }
});