jQuery UI 可排序 - 在开始时执行某些操作并在删除时删除

Question

我有两个块，一个是“可拖动的”，另一个是“可排序的”。

当我开始从“可排序”中拖动一个项目时，我想为 div 添加背景颜色，如果我停止拖动它，我想删除背景颜色。

这是我的 JS：

$(".sortableList").sortable({
 start: function(event, ui) {

   if (event.handleObj.namespace=="sortable")
       $('.background').show();
    },

 update: function(event, ui) {

   if (event.handleObj.namespace=="sortable")
       $('.background').hide();
    }


});
$(".draggable").draggable({
 connectToSortable: '.sortableList',
 cursor: 'pointer',
 helper: 'clone',
 revert: 'invalid',
 start: function (event, ui) {
     $(this).addClass('testing');
 }
});

这是一个jsbin，其中包含一个我正在尝试做的活生生的例子。

问题是，当我开始从“可排序”中拖动一个项目并将其放在同一个位置时，背景颜色保持不变，我没想到会这样。

我该怎么做？

Answer 1

使用stop 事件而不是update 事件：

$(".sortableList").sortable({
 start: function(event, ui) {

   if (event.handleObj.namespace=="sortable")
       $('.background').show();
    },

 stop: function(event, ui) {

   if (event.handleObj.namespace=="sortable")
       $('.background').hide();
    }


});