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


});