jQuery UI Sortierbare Methoden feuern zu schnell

Question

Ich mache ein Sitzungsdiagramm, wo Benutzer Zeilen und Tabellen hinzufügen und Tabellen von Zeile zu Zeile verschieben können. Ich habe diese Funktionalität bereits hinzugefügt. Ziel ist es jedoch, eine Funktion auszuführen, wenn der Benutzer mit dem Ziehen beginnt, und eine, wenn das Ziehen gestoppt wurde. Momentan feuern die Start- und Stopp-Methoden zur gleichen Zeit und lange bevor der Benutzer mit dem Ziehen einer Tabelle begonnen hat. Jeder Rat wird geschätzt.

//Global Vars 
var tableCounter = 0; 
var rowCounter = 0; 
////////////// 

$(".rowButton").click(function() { 
    rowCounter++; 
    $("#rowContainer").append("<div class='tableRow' id='row " + rowCounter + "'><a class='tableButton btn btn-primary'><span class='glyphicon glyphicon-plus'></span></a><ul class='sortable' ontouchstart='return false;' id='sortable" + rowCounter + "'></ul></div>"); 

$(".sortable").sortable({ 
    connectWith: ".sortable", 
    start: console.log("start"), 
    stop: console.log("stop") 
}); 
$(".sortable").disableSelection(); 

$(".tableButton").unbind().click(function(){ 
    tableCounter++;                
    $(this).next().append("<li ontouchstart='return false;' class='ui-state-default' id='"+ tableCounter + "'>Table " + tableCounter + "<br>" + "Test" + "</li>"); 
}); 

//Prevent touch selection of text 
$(".ui-state-default, .sortable").on("touchstart", function(e) { 
    e.preventDefault(); 
}); 

}); 

Link fummeln: http://jsbin.com/xilasun/edit?html,css,js,console,output

Answer 1

hier:

$(".sortable").sortable({ 
    connectWith: ".sortable", 
    start: console.log("start"), 
    stop: console.log("stop") 
}); 

Sie berufen sich console.log() wegen der Klammern. Sie müssen einen Funktionsnamen oder eine anonyme Funktion übergeben. Stattdessen übergeben Sie das Ergebnis von console.log(), sein Rückgabewert, der undefined ist.

Es sollte wie folgt sein:

$(".sortable").sortable({ 
    connectWith: ".sortable", 
    start: myStart, 
    stop: myStop 
}); 

function myStart() {} 
function myStop() {} 

Oder diese:

$(".sortable").sortable({ 
    connectWith: ".sortable", 
    start: function() { 
     console.log("start"); 
    }, 
    stop: function() { 
     console.log("start"); 
    } 
});