JQuery drag and drop - обратная инженерия Facebook uiTokenizer на тему "Искусство и интересы"

Я использую $.special.event.drag и $.special.event.drop и jQuery обратное проектирование facebook uiTokenizer, потому что jQuery UI sortable/draggable является тяжелым и медленным.

Мой вопрос, я думаю, связан с математикой толерантности для принятия решения о том, когда вводить элемент-заполнитель.

Я очистил много этого кода, так как я впервые написал его, но предпосылка все еще существует и должна работать для этого вопроса.

Вот код и логика: 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()...: -\

Любая помощь, которую вы можете предложить, будет с благодарностью.

UPDATE: Чтобы ответить на ваши комментарии... Если вы перейдете на ссылку JSFiddle и перетащите элемент над другим элементом... Он должен немедленно ударить его по пути во всех направлениях. Чтобы посмотреть сравнение с моим против Facebook, проверьте их на https://www.facebook.com//фаворитах, затем нажмите кнопку "Изменить".

Независимо от того, является ли метод "Толерантность" неправильным, их список интересов - это то, что я ищу, чтобы дублировать. Я даже не знаю, является ли область толерантности неправильной, я хочу достичь того, что они делают.

Надеюсь, это поможет!

Ответы

Ответ 1

Похоже, вы просто определяете, правильно ли перетаскивает перетаскиваемые цели, и если вершина перетаскивания пересекает мишени внизу (с некоторым допуском).

Есть два способа сделать это:

  • Найти все пересекающиеся элементы и найти наибольшую площадь - в этом случае левый квадрат изображения ниже.
  • Если draggable имеет те же размеры, что и droppable, перекрытие 1/4 было бы достаточно - в этом случае правый квадрат.

enter image description here

Вторая, на сегодняшний день, самая легкая в реализации, но не является такой общей, как первая. Поэтому, быстро просмотрев свой код, я прокрутил бы все "возможные" отбрасываемые элементы, определив область перекрытия и нацелив на наибольшую.