jQuery UI Сортируемые методы слишком быстро срабатывают

Question

Я делаю диаграмму сидения, где пользователи могут добавлять строки и таблицы и перемещать таблицы из строки в строку. Я уже добавил эту функциональность. Однако цель состоит в том, чтобы выполнить функцию, когда пользователь начинает перетаскивать, а другой - при перетаскивании. В настоящее время методы запуска и остановки запускаются одновременно и задолго до того, как пользователь начал перетаскивать таблицу. Любые советы приветствуются.

//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(); 
}); 

}); 

Ссылка на скрипку: http://jsbin.com/xilasun/edit?html,css,js,console,output

Answer 1

Здесь:

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

Вы призываете console.log() из скобок. Вам нужно передать имя функции или анонимную функцию. Вместо этого вы принимаете результат от console.log(), его возвращаемое значение, что составляет undefined.

Это должно быть что-то вроде этого:

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

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

Или это:

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