jquery - 防止 jquery Draggable 在可调整大小的 droppable 中跳转

Question

尝试将可拖动对象放置到可调整大小的可放置对象上。一切都工作正常，直到我将可调整大小的语句添加到可删除对象中。现在，可拖动在释放时会跳跃。我需要考虑的 droppable 中是否存在一些偏移？

$(document).ready(function () {

$("#droppable").resizable();

var x = null;

//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit'
});

        $("#droppable").droppable({

            drop: function (e, ui) {

                if ($(ui.draggable)[0].id != "") {
                    x = ui.helper.clone();
                ui.helper.remove();
                x.draggable({
                    helper: 'original',
                    containment: '#droppable',
                    tolerance: 'fit'
                });
                x.resizable({
                    minWidth: 50
                });
                x.appendTo('#droppable');
            }

            }
        });

});

jsfiddle 示例: http://jsfiddle.net/78aAf/2/

Answer 1

您需要将 css left/top 设置为 @czarchaic 提到的，但不仅仅是设置为 0，您需要使用 ui.offset 设置为放置位置放置元素的位置，然后考虑放置区域的偏移、内边距、边距和边框宽度。

x.draggable({
    helper: 'original',
    containment: '#droppable',
    tolerance: 'fit'
}).css({ top: ui.offset.top-6, left: ui.offset.left - 228});

http://jsfiddle.net/78aAf/7/

jQuery Droppable drop event