防止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(可拖动和可调整大小)拖动光标时调整图像大小
可调整大小的 tinyMCE 实例不适用于 jqueryUI 的 .draggable
如何防止 Resizable 和 Draggable 元素相互折叠?