jQuery的拖放 – 逆向工程Facebook的uiTokenizer关于“Arts＆Interests”

我使用$.special.event.drag .special.event.drag和$.special.event.drop .special.event.drop和jQuery对facebook的uiTokenizer进行反向工程，因为jQuery UI的sorting/拖放很重且很慢。

我认为我的问题是与决定何时注入占位符元素的宽容math有关。

自从我第一次写这个代码以来，我已经清理了很多代码，但前提仍然存在，应该为这个问题工作。

这里是代码和逻辑： http : //jsfiddle.net/JoshuaIRL/kf9Qt/进行testing。

我需要有人看的地方将是$ .drop函数的“宽容”区域，如果你find它的话。

  $.drop({ mode:'intersect', tolerance: function( event, proxy, target ){ var testV = event.pageY > ( target.top + target.height / 2 ); $.data(target.elem, "drop+reorder", testV ? "insertAfter" : "insertBefore" ); return this.contains( target, [ event.pageX, event.pageY ] ); } }); 

Facebook的实际光标击中另一个元素时，似乎做了一个“insertAfter”。

我想这也可能是它的核心：

 if ( drop && $(drop).is('.uiToken') && ( drop != dd.current || method != dd.method ) ){ $( this )[ method ]( drop ); dd.current = drop; dd.method = method; dd.update(); refreshTokens(clickOffset); placeholder.insertAfter($(this)); } 

此外，我需要弄清楚如何确保我不会用这个愚蠢的开放式$.drop()方法来过度绑定我的元素…： – \

任何帮助你可能会提供将不胜感激。

更新：要回答你的评论…如果你去JSFiddle链接，并将一个元素拖到另一个元素…它应该立即碰到它的方向在各个方向。 要查看我与Facebook的对比，请在https://www.facebook.com/ / favorites中查看他们的内容，然后单击“编辑”button。

不pipe“容忍”方法是不是有什么问题，他们的兴趣列表就是我想要复制的。 我甚至不知道容忍区是不是有什么问题，我想实现他们正在做的事情。

我希望这有帮助！

Answer 1

它看起来像你只是确定可拖动的是否与左侧的目标相交，并且如果可拖动的顶端与目标底部相交（有一定的容差）。

有两种方法我会去这个：

1. find所有的相交元素，find最大的区域 – 在这个例子中是左下方的图像。
2. 如果可拖动的尺寸与可拖放的尺寸相同，则1/4的重叠就足够了 – 在这种情况下是正确的方块。

第二个是迄今为止最容易实现的，但不像第一个一样普遍。 所以通过快速浏览你的代码，我将循环遍历所有“可能的”可丢弃的元素，确定重叠的区域并且目标最大。