转移div后jquery元素失去可拖动效果

Question

我是 Jquery UI Draggable 的新手。这是我的问题，我有 2 个 div，哪些项目可以在两个 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",
});

Fiddle

Answer 2

使用 sortable api 可以轻松解决此用例。你用connectWith 连接两个元素，然后使用不同的事件（比如receive - 其余的都在这里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/