Jquery ui ziehen, ablegen und sortieren

Question

Ich habe 6 Optionen zum Ziehen und Ablegen in 6 droppable Bereich. Der abwerfbare Bereich sollte nicht mehr ein Element enthalten. Wenn ein abtropfbarer Bereich bereits ein Element enthält und einen anderen löscht, sollte er einfach das existierende Element zum nächsten gleichgeordneten Element verschieben.

Ich möchte genau wie jquery sortable aber dies sollte nach Drag & Drop so funktionieren. Finden

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

Nicht sicher über die sortierbare Teil auf der Grundlage Ihrer Beschreibung, aber hier ist eine Möglichkeit, die abwerfbaren zu handhaben:

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

Zuerst lösen Sie das gezogene Objekt. Zweite Überprüfung, ob das Ziel bereits eine .qitem enthält. Wenn dies der Fall ist, finden Sie den nächsten leeren Steckplatz.

Dies funktioniert nicht wie sortierbar. Wie ich in den Kommentaren erwähnt habe, würde ich empfehlen, ein leeres sortierbares (als Ziel) zu erstellen, und dann kann der Benutzer Element ziehen. Dies könnte wie folgt aussehen:

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