Question

我在一个页面上有两个列表，其中可能会拖动它们之间的项目。我正在使用jQuery-UI对该功能进行排序。但是，jQuery添加到项目中的style属性会干扰边框的样式。我试图删除drop回调中的样式属性，但似乎过早启动，并且在调用removeStyle后，sortable会添加样式属性。

如何确保在完成可排序项后移除样式属性，以便显示正确的边框样式？

$(document).ready(function(){

  function removeStyle(e, ui) {
    var item = $(ui.draggable)
    item.removeAttr('style')
  }

  $('.drawer, .list').disableSelection();
  $('.drawer').sortable({ connectWith: '.list', tolerance: 'pointer' })
  $('.list').sortable({ connectWith: '.drawer', tolerance: 'pointer' })
  $('.drawer, .list').droppable({
    hoverClass: 'item-over',
    tolerance: 'pointer',
    drop : removeStyle
  })
})

JSFiddle

Answer 1

使用MutationObserver监控样式更改并在事件发生时触发事件：

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
        // removeStyle();
    });    
});

var observationAttributes = { attributes : true, attributeFilter : ['style'] };
var target = document.getElementById('yourSortable');
var anotherTarget = document.getElementById('anotherSortable');

// Example of more than one observed element
observer.observe(target, observationAttributes);
observer.observe(anotherTarget, observationAttributes);

请点击此处了解MutationRecords，我已经在MutationObserver回调中循环播放，因此每个样式更改都会在removeStyle()之后触发，因此样式肯定会被删除。< / p>

删除sortable时如何删除style属性？

1 个答案: