Перетаскивание jQuery - обратный инжиниринг uiTokenizer от Facebook в разделе «Искусство и интересы» - PullRequest
40 голосов
/ 22 февраля 2011

Я использую $.special.event.drag и $.special.event.drop и jQuery для обратного проектирования в Facebook, поскольку сортировка / перетаскивание пользовательского интерфейса jQuery тяжелая и медленная.

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

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

Вот коди логика: 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, затем нажмите кнопку «Редактировать».

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

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

1 Ответ

2 голосов
/ 15 ноября 2011

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

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

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

enter image description here

Второй вариант является наиболее простым в реализации, но далеко не таким общим, как первый.Так что, быстро просматривая ваш код, я бы перебрал все «возможные» отбрасываемые элементы, определил область перекрытия и нацелился на наибольшее.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...