jQuery的拖放 - 逆向工程Facebook的'艺术与兴趣'的uiTokenizer

Question

我正在使用$.special.event.drag和$.special.event.dropjQuery 逆向工程facebook的uiTokenizer ,因为jQuery UI的可排序/可拖动很重且很慢.

我认为我的问题与决定何时注入占位符元素的容差数学有关.

自从我第一次编写代码以来,我已经清理了很多代码,但前提仍然存在并应该适用于这个问题.

这是代码和逻辑:http: //jsfiddle.net/JoshuaIRL/kf9Qt/进行测试.

我需要有人看的区域是$ .drop函数的"容差"区域,如果你找到它的话.

 $.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,然后点击"编辑"按钮.

无论"宽容"方法是否错误,他们的兴趣列表都是我想复制的内容.我甚至不知道宽容区域是不是错了,我想要实现他们正在做的事情.

我希望这有帮助!

Answer 1

看起来您只是确定可拖动对象的右侧是否与左侧的目标相交，以及可拖动对象的顶部是否与目标底部相交（具有一定的容差）。

我有两种方法可以解决这个问题：

1. 找到所有相交元素并找到最大区域 - 在本例中为下图的左侧正方形。
2. 如果可拖动的尺寸与可放置的尺寸相同，则 1/4 重叠就足够了 - 在本例中为右侧正方形。

第二种方法是迄今为止最容易实现的，但并不像第一种方法那么通用。因此，通过快速浏览您的代码，我将循环遍历所有“可能的”可放置元素，确定重叠区域并定位最大的区域。