jQuery UI可拖动:可放置控件动态更改大小时出现“ over”和“ out”事件的问题

时间:2019-05-01 17:51:51

标签: jquery-ui draggable droppable

我正在做一个项目,需要允许从侧边栏拖放到某些内容。

非常重要的是,内容(当用可拖动的鼠标悬停时)会通过应用一些填充(在内部内容中,在示例代码中为图像)来扩展。

当我将可拖动对象与可拖动对象一起输入时,将添加填充, 这使得可投放对象的尺寸(宽度和高度)都更大。 jQuery UI不会“识别”大小的变化,这意味着当我将可拖动对象移动到更靠近底部边框(或右侧边框)时,已经触发了“ out”事件(即使很明显可拖动对象仍在可放置对象的(新)边界之内。

只有在将可拖动对象移动了很多(靠近左侧和顶部边框而没有离开可放置对象)之后,jquery ui才“识别”了可放置对象的新(更大)尺寸,并且可以非常靠近底部移动或框的右边框,而不会触发“ out”事件。

对于我的项目,非常重要的一点是,我可以完全进入可放置对象的底部和右侧边框,而不会触发“ out”事件。

任何人都知道如何在拖动模式下“教” jquery ui,以确保可放置对象的大小已更改? (无需在可放置的内容中移动,也不会左右边框)

1 个答案:

答案 0 :(得分:0)

我在jquery UI中分析了问题。

来自以下事实:仅当将可拖动对象移动到展开的可放置对象的上边缘时才调用方法“ prepareOffsets”。 “ prepareOffsets”正在纠正droppable的新大小,并且一切正常。

中的一个小补丁
$.ui.plugin.add( "draggable", "scroll", {

插件,方法:

drag: function( event, ui, i  ) {

解决了该问题。除了仅在可放置对象顶部附近时才调用“ prepareOffsets”, 插入以下行:

if (scrolled == false){scrolled = true;}

恰好在“拖动”方法的最后一个if语句之上。 在此声明上方:

if ( scrolled !== false && $.ui.ddmanager && !o.dropBehaviour ) {
   $.ui.ddmanager.prepareOffsets( i, event );
}

这可能不是一个完美的解决方案(因为它可能经常调用“ prepareOffsets”),但是它解决了扩展droppable遇到的所有问题。 “ over”,“ out”和“ drop”在该补丁中正常工作。

欢呼