jquery ui drag drop + sortable

Question

Я также пытаюсь сделать перетаскивание и сортировку. Я могу перетащить из div 1 в 2 и из div 2 в div 1, но поскольку я использую клон, я не могу получить сортировку.

Любые идеи?

$(document).ready(function() { 

    $("#qselected").sortable(); 
    $("#qselected").disableSelection(); 

    $(".qitem").draggable({ 
     containment : "#container", 
     helper : 'clone', 
     revert : 'invalid' 
    }); 

    $("#qselected, #qlist").droppable({ 
     hoverClass : 'ui-state-highlight', 
     drop : function(ev, ui) { 
      $(ui.draggable).clone().appendTo(this); 
      $(ui.draggable).remove(); 

      $(".qitem").draggable({ 
       containment : "#container", 
       helper : 'clone', 
       revert : 'invalid' 
      }); 
     } 
    }); 
}); 

Живая демонстрация: http://jsfiddle.net/6xXPq/4/

Answer 1

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

Вот рабочий код: Example JSFiddle

$(document).ready(function() { 
    $("#qselected").sortable(); 
    $("#qselected").disableSelection(); 

    $(".qitem").draggable({ 
     containment : "#container", 
     helper : 'clone', 
     revert : 'invalid' 
    }); 

    $("#qselected, #qlist").droppable({ 
     hoverClass : 'ui-state-highlight', 
     accept: ":not(.ui-sortable-helper)", 
     drop : function(ev, ui) { 
      $(ui.draggable).clone().appendTo(this); 
      $(ui.draggable).remove(); 
     } 
    }); 
}); 

Чтобы получить это правильно работать, вы не можете позволить обработчик капли принимать элементы, которые упорядочены, чтобы сделать это, мы добавим accept фильтр Droppable обработчик:

accept: ":not(.ui-sortable-helper)", 

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

Вы должны разработать новый метод, чтобы удалить их (это может быть, вероятно, будет сделано с помощью флага, чтобы удалить переключатель между Draggable/Сортируемой функциональностью приставки)

Answer 2

У меня есть один и тот же вопрос и Я не нашел article and demo

нет необходимости использовать перетаскиваемым и Droppable, просто используйте следующий код (проверить демо):

$('#example-1-4 .sortable-list').sortable({ 
     connectWith: '#example-1-4 .sortable-list', 
     containment: '#containment' 
    }); 

Ключевым моментом является опция connectWith of sortable() Надеюсь, что это поможет.