jQuery Sortable удаляет поведение по умолчанию при перетаскивании, восстанавливает после перетаскивания

У меня есть сетка изображений, которую я хочу перетащить для сортировки. sortable () отлично работает. Предостережение заключается в том, что у меня также запущен плагин jQuery Fancybox http://fancybox.net, который откроет более крупный просмотр изображения при нажатии.

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

Я пробовал что-то подобное, но все ДЕЙСТВИТЕЛЬНО запуталось (перетаскивание больше не работает, мой список переставляется по всей странице, это мерзко):

$('#list').sortable({
  start:function(e,ui) {
    e.preventDefault();
  }
});

Пробовал как с start, так и с stop, но безуспешно. Я также пробовал отвязать click обработчик для элементов, но это тоже не помогло. В идеале я мог бы как бы «спрятать» обработчики fancybox при перетаскивании, а затем восстановить их после того, как я опущу. Может быть способ отключить весь список при перетаскивании, а затем снова вызвать $.fancybox(), чтобы запустить его, но должен быть способ попроще ...

Спасибо за любую помощь!


jquery fancybox jquery-ui-sortable
person Rob Cameron    schedule 27.05.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Хорошо, у меня все заработало! Я был уверен, что нижеприведенный kwicher будет работать, но мне пришлось немного его настроить. В итоге мне пришлось переключаться между обратными вызовами fancybox и сортируемыми обратными вызовами:

$('#list').sortable({
  start:function(e,ui) {
    ui.item.addClass('drag_sort');
  }
});

$('#list').fancybox({
  onStart:function(items,index,opts) {
    var obj = $(items[index]).parent()
    if (obj.hasClass('drag_sort')) {
      obj.removeClass('drag_sort');
      return false;
    }
  }
});

Помещение removeClass() в stop обратный вызов sortable не сработало: очевидно, что sortable stop срабатывает перед fancybox onStart, и поэтому к тому времени, когда fancybox отправился на поиск, класс исчез.

Обратите внимание, что сортировка нацелена непосредственно на <li> в списке, а fancybox нацелена на <a> внутри элемента списка. Вот почему я должен получить parent() в onStart fancybox. Да, и простого ввода return false в onStart достаточно, чтобы fancybox проигнорировал этот щелчок!

person Rob Cameron    schedule 02.06.2011

arrow_upward
0
arrow_downward

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

Затем в коде, который запускается для обычного события щелчка, я бы проверил, был ли текущий щелчок помечен как перетаскивание. Пример сверхнизких технологий:

var clickIsForDragging = false;

$('#list li').click(function() {
  // Ignore dragging clicks
  if (clickIsForDragging) { 
    clickIsForDragging = false;
    return; 
  } 

  // Perform whatever normal click action 
});

$('#list').sortable({
  start:function(e,ui) {
    e.preventDefault();
    clickIsForDragging = true;
  }
});

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

Я также видел еще одно сообщение о переполнении стека, в котором рассматривалась аналогичная проблема и использовались отвязка и повторная привязка: jQuery UI Sortable - Как отменить событие щелчка на элементе, который перетаскивается / сортируется?

person Ken Colton    schedule 27.05.2011

arrow_upward
0
arrow_downward

Я еще не тестировал, но в принципе должно работать:

$('#list').sortable({
 start:function(e,ui) {
 //e.preventDefault(); - I am not sure that would be necessary
 $('#list li').addClass('drag_sort');
}
stop:function(){
      $('#list li').removeClass('drag_sort');
}
});


$('#list li').fancybox({
 onStart:function(){
  if($(this).hasClass('drag_sort')){
   $.fancybox.cancel();
  }
 }
});

Вы можете попробовать.

K

person kwicher    schedule 28.05.2011
comment
Это почти сработало ... см. Мой последний код ниже. Вы меня на правильном пути! - person Rob Cameron; 02.06.2011