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

Posted 2023-05-08

【中文标题】防止jquery draggable跳入可调整大小的droppable

【英文标题】：Prevent jquery draggable from jumping in resizable droppable

【发布时间】：2014-01-21 20:55:52

【问题描述】：

尝试将可拖动对象拖放到也可调整大小的可拖放对象上。在我将可调整大小的语句添加到 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/

【问题讨论】：

css left 和 top 属性导致了你的跳跃。一旦将可拖动对象附加到可放置对象（具有相对定位），顶部和左侧属性就会使其跳转到该相对位置。这是一个 Fiddle，它明确声明 top 和 left 为 0。

更好，但我不希望该项目附加到左上角。我希望它留在我实际放下它的地方。

【参考方案1】：

您需要像@czarchaic 提到的那样设置css left/top，但不仅仅是设置为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

【讨论】：

这有帮助。我补充说： var id = "#" + $(this).attr("id");并将css更改为： top: ui.offset.top - $(id).offset().top, left: ui.offset.left - $(id).offset().left 以允许动态计算可放置 div 的位置。谢谢。

太棒了，这好多了，而且可扩展性更强。