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

Posted

技术标签:

【中文标题】防止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 的位置。谢谢。 太棒了,这好多了,而且可扩展性更强。

以上是关于防止jquery draggable跳入可调整大小的droppable的主要内容,如果未能解决你的问题,请参考以下文章

如何在使用 jQuery(可拖动和可调整大小)拖动光标时调整图像大小

将 jquery 可调整大小的句柄移出 div

可调整大小的 tinyMCE 实例不适用于 jqueryUI 的 .draggable

如何防止 Resizable 和 Draggable 元素相互折叠?

jQuery sortable resizable draggable的大小调整问题

JQuery Resizable Draggable Position 绝对