Jquery ui drag, drop and sort

Question

У меня есть 6 вариантов перетаскивания в 6 отсеках. Отбрасываемая область не должна содержать больше одного перетаскиваемого элемента. Если область сбрасывается уже элементом и отбрасывает другую, она должна просто сдвинуть существующий элемент на следующий элемент sibling.

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

Найти fiddle demo here.

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

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

$(".qselected, #qlist").droppable({ 
    hoverClass : 'ui-state-highlight', 
    drop : function(ev, ui) { 

    if($('.qselected div').length){ 
     //$('.qselected div').eq(0).remove().appendTo(); 
    } 
    $(ui.draggable).clone().appendTo(this); 
    $(ui.draggable).remove(); 

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

Answer 1

Не уверен в сортируемых частях на основании вашего описания, но вот один способ справиться с Droppable:

Пример: http://jsfiddle.net/Twisty/s08pf0g9/

JavaScript

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

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

    $(".qselected, #qlist").droppable({ 
    hoverClass: 'ui-state-highlight', 
    drop: function(ev, ui) { 
     var $item = ui.draggable.detach(); 
     var $target = $(ev.target); 

     if ($target.find(".qitem").length === 0) { 
     console.log("Target is empty, dropping here."); 
     $item.attr("style", ""); 
     $item.appendTo($target); 
     } else { 
     console.log("Target is full."); 
     $(".qselected").each(function(i, el) { 
      if ($(el).find(".qitem").length === 0) { 
      console.log("target " + i + " is empty, dropping here."); 
      $item.attr("style", ""); 
      $item.appendTo($(el)); 
      return false; 
      } 
     }); 
     } 
    } 
    }); 
}); 

Сначала отсоедините перетаскиваемый элемент. Вторая проверка, если цель содержит .qitem. Если это так, найдите следующий пустой слот.

Это не будет работать как сортируемый. Как я упоминал в комментариях, я бы посоветовал создать пустую сортировку (как цель), а затем пользователь может перетащить элемент. Это может выглядеть следующим образом:

http://jsfiddle.net/Twisty/s08pf0g9/1/

$(document).ready(function() { 
    $("#sorting").sortable({ 
    items: "> div.qselected", 
    receive: function(e, ui) { 
     var $item = $(this).find(".ui-draggable"); 
     $item.removeClass("ui-draggable"); 
     $item.next().append($item); 
    } 
    }); 
    $("#sorting").disableSelection(); 

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