Question

尝试将可拖动拖放到也可调整大小的droppable上。一切正常，直到我将可调整大小的语句添加到droppable。现在可释放的跳跃在释放。在我需要考虑的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

防止jquery draggable跳入可调整大小的dropable

1 个答案: