jQuery UI Sortable方法觸發得太快

Question

我正在制作一個座位圖，用戶可以在其中添加行和表，以及在行與行之間移動表。 我已經添加了該功能。 但是，目標是在用戶開始拖動時執行一項功能，而在拖動停止時執行一項功能。 現在，start和stop方法在用戶開始拖動表格的同時以及很遠之前觸發。 任何建議表示贊賞。

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