转移div后，jQuery元素失去了可拖动的效果

Question

我是Jquery UI Draggable的新用户。 这是我的问题，我有2个Divs，其中两个div之间可以转移项目。 为什么将div转移到另一个div然后返回时，可拖动效果消失了？ 我不能使用辅助克隆。 元素必须始终是可拖动的。

这是在jsfiddle https://jsfiddle.net/w7vjuuqx/7/上复制问题：

1. 将蓝色框从红色框拖放到绿色框。
2. 将蓝色框从绿色框拖放到红色框。
3. 重复步骤1。在这里拖动效果消失了。

JS：

$('.item').draggable();

$( '#placeholder' ).droppable({
    accept: '.item',
    drop: function( event, ui ) {
      var droppable = $(this);
      var draggable = ui.draggable;
      $(draggable).attr('class', 'new_item_inside');
      draggable.appendTo(droppable);
      draggable.css({position: 'absolute', top: '0px', left: '0px'});
      alert('hello');
    }
});

$( '#item_holder' ).droppable({
  accept: '.new_item_inside',
  drop: function( event, ui ) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // var html = $(ui.draggable).clone(true);
     ui.draggable.draggable('enable');
    $(draggable).attr('class', 'item');
    draggable.appendTo('#item_holder');
    draggable.css({position: 'static', float: 'left'});

  }
});

HTML：

<div id="item_holder" style="width:100px;height:100px;background-color:red">
   <div class="item" style="width:20px;height:20px;background-color:blue">
       test
   </div>
</div>
<div id="placeholder" style="width:100px;height:100px;background-color:green;border-style: solid;display: inline-block;position:relative">

</div>

Answer 1

如果将以下代码添加到可拖动的.item上，则应在视觉上看到拖动动作。 但是，您会注意到，原始文件现在保留在原处，并且克隆是可拖动的。 但是我认为用户会知道该怎么做。 不会令人困惑。

$('.item').draggable({
 revert: "invalid",
 helper: "clone",
 cursor : "move",
});

小提琴

Answer 2

使用可排序的 api可以轻松解决该用例。 您可以使用connectWith连接两个元素，然后使用不同的事件（例如connectWith其余事件在这里http://api.jqueryui.com/sortable/ ）进行进一步处理：

JS：

$('.itemContainer').sortable({
    connectWith: $('.itemContainer'),
  receive: function(event, ui) {
    console.log(ui.item[0].innerHTML);
  }
});

HTML：

<ul id="leftHolder" class="itemContainer">
  <li class="draggableItem">1</li>
  <li class="draggableItem">2</li>
  <li class="draggableItem">3</li>
</ul>

<ul id="rightHolder" class="itemContainer">
</ul>

内容： https ://jsfiddle.net/gy2y5dj2/