Anzahl der Elemente in sortierbarer Größe begrenzen (mit Ziehen als Quelle)? - jquery, jquery-ui-sortierbar, jquery-ui-ziehbar

Ich habe ein Draggable, das über verbunden ist connectToSortable zu mehrere sortierbare. Ich möchte die Anzahl der Artikel begrenzen, die Sie sortieren können. Ich kann dies tun, wenn Sie aus einer anderen sortierbaren Tabelle ziehen, aber nicht, wenn Sie von der Draggable-Komponente zur Sortierbaren ziehen. Ein einfaches Beispiel (als JSBin):

$( ".sortable" ).sortable({
connectWith: ".sortable"
});

$( ".sortable" ).bind( "sortreceive", function(event, ui) {
// This will not work because the sender is a draggable, which has no "cancel" method
if ( 4 < $( this ).sortable( "toArray" ).length ) {
$(ui.sender).sortable("cancel");
}
});

$( "#draggable li" ).draggable({
connectToSortable: ".sortable",
helper: "clone"
});

Ich habe es zuerst versucht $(ui.sender).sortable("cancel"); in dem sortreceive Ereignis, aber weil der Absender ein ist draggable, nicht noch einen sortablehat es keine cancel Methode und das funktioniert nicht (so diese und diese Fragen scheinen mein Problem nicht zu lösen). Ich habe folgendes versucht die Logik, die das Schleppbare und das Sortierbare zusammenhält, aber ich sehe keinen Ort, an dem ich den "gefälschten" Stop abbrechen kann.

Es wäre großartig, wenn es eine Art visuelles Feedback gibt, beispielsweise den Mauszeiger in no-dropund / oder eine Hintergrundfarbe ändert sich auf dem sortierbaren.

Kontext: Dies ist ein Antwortversuch Beschränken Sie die Anzahl der Widgets in den Seitenleisten auf dem WordPress Stack Exchange. Die WordPress-Widget-Verwaltungsseite enthält einen Container mit allen verfügbaren Widgets, die als ziehbare Elemente eingerichtet sind, die mit verschiedenen sortierbaren Containern für jede Seitenleiste verbunden sind. Ich möchte nicht ändern der KerncodeErweitern Sie es einfach mit so wenig Code, wie erforderlich ist, um zu verhindern, dass ein anderes Widget in eine "volle" Seitenleiste fällt.

Antworten:

Fügen Sie einfach die if-Klausel hinzu, um die Anzahl der Elemente in der Sortierbarkeit zu prüfen, und binden Sie das Draggable-Ereignis, wenn Sie diese Anzahl erreicht haben.

BEARBEITEN: (enthält jetzt Unterstützung für mehrere Listen)

$(".draggable").draggable({revert:true,helper:"clone",connectToSortable: ".sortable"});

$(".sortable").sortable({
connectWith:".sortable",
receive: function(ui) {
if($(this).children().length >=6) {
$(this).children().addClass("filled");
$(this).addClass("dontDrop");
$(".sortable").sortable("option", "connectWith",$(".sortable").not(".dontDrop"));
$(".draggable").draggable("option", "connectToSortable",$(".sortable").not(".dontDrop"));
}else {
$(this).children().removeClass("filled");
}
add_delete();
}
});
function add_delete() {
$(".delete").remove();
$(".sortable>li").append("<span class="delete">--</span>");
$(".delete").unbind("click").click(function(){
if($(this).parent().siblings().length <=5) {//for atmost 6 children in sortable
$(this).parent().parent().children().removeClass("filled");
$(this).parent().parent().removeClass("dontDrop");
console.log($(".sortable").not(".dontDrop"));
$(".sortable").sortable("option", "connectWith",$(".sortable").not(".dontDrop"));
$(".draggable").draggable("option", "connectToSortable",$(".sortable").not(".dontDrop"));
}
$(this).parent().hide("slow").remove();
});
}
add_delete();

Überprüfen Sie die Geige hier JSFidel

Was ich hier verwendet habe, ist: Man kann nicht nur Selektoren, sondern Elemente selbst an die Optionen connectWith / connectToSortable übergeben. Wenn ein "ul" 6 Elemente enthält, gebe ich ihm die Klasse "dontDrop" und wird daher von den Verbindungen ausgeschlossen. Hoffe, das klärt es für Sie.

Lassen Sie diese Belohnung so kommen: D

Sie können die Verbindung deaktivieren, wenn eine Bedingung erfüllt ist:

$("#sortable").bind( "sortreceive", function(event, ui) {
if ($( "#sortable li" ).length > 3){
$( "#draggable li" ).draggable( "option", "connectToSortable", false );
}
});

Geige hier: http://jsfiddle.net/ZLCDr/1/