Question

我尝试使用拖放的可排序列表，但我在drop事件中有一个可视错误。当我将一条线拖到另一个位置时，在放置事件中，该线将占据新位置。但拖线，视觉上回到了以前的位置。

我只在firefox上有这个bug。

您可以在此jsfiddle上尝试此操作。

如何删除此可视错误PLZ？

这是我的代码： HTML：

<ul>
  <li draggable="true">test 1</li>
  <li draggable="true">test 2</li>
</ul>

CSS：

[draggable] {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
ul{
  list-style-type: none;
}
ul li.skeleton{
  border: 1px dashed #CCC;
  background: none;
}
ul li{
  height: 22px;
  margin: 10px 2px 0px 2px;
  padding: 10px 2px;
  line-height: 22px;
  border: 1px solid #ebebeb;
}

JS（在$（document）.ready（function（）{}）;）：

var current_element = null;
var skeleton = $('<li class="skeleton"></li>');

$('li').on({
  dragstart: function(e) {
    current_element = $(this);

    var dt =  e.originalEvent.dataTransfer;
    dt.effectAllowed = "move";
    dt.setData("text", "Foo");            
  },
  dragend: function(e) {
    skeleton.after(current_element);
    current_element.show();
    skeleton.detach();
  }
}); 

$('li').on('dragover dragenter drop', function(e){
  if (e.type == 'drop') {
    e.originalEvent.dataTransfer.getData('text');
    current_element.trigger('dragend');
    return false;
  }
  e.originalEvent.dataTransfer.dropEffect = 'move';
  $(this)[skeleton.index() < $(this).index() ? 'after' : 'before'](skeleton);
  current_element.hide();

  return false;     
});

Jquery拖放视觉错误

0 个答案: