jQuery Sortable - удалить поведение по умолчанию при перетаскивании, восстановить после удаления - PullRequest
0 голосов
/ 27 мая 2011

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

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

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 02 июня 2011

Хорошо, я получил это работает!Я был уверен, что 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 обратного вызова для сортируемого не работало: очевидно, сортируемый stop стреляет до fancybox onStart и поэтому класс исчез, когда fancybox отправился искать.

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

0 голосов
/ 28 мая 2011

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

$('#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

0 голосов
/ 27 мая 2011

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

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

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;
  }
});

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

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

...