div要素を転送した後、Jquery要素がドラッグ可能な効果を失った

Question

Jquery UIのドラッグ可能な新しいIm。私の問題をheres、私はアイテムが2つのdivの間で転送されるかもしれない2 Divsを持っています。他のdivに転送されたdivが返されたときに、ドラッグ可能な効果が失われるのはなぜですか？私はヘルパークローンを使うことはできません。要素は常にドラッグ可能でなければなりません。ドラッグ

1. と緑色のボックスに赤いボックスから青色のボックスをドロップします。ここでは

   はjsfiddle https://jsfiddle.net/w7vjuuqx/7/上の問題を複製することです。

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に以下のコードを追加した場合、あなたが視覚的にドラッグアクションが表示されるはずです。しかし、あなたは気づくでしょう、元の場所に残り、クローンはdraggableです。しかし、私はユーザーがこれで何をすべきか知っていると思う。混乱することはありません。

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

Fiddle

Answer 2

このユースケースは、ソート APIを用いて容易に解くことです。

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> 

その後、さらに操作すること（例えばここにあるhttp://api.jqueryui.com/sortable/をそれらの-the残りを受けるなど）さまざまなイベントを使用しconnectWithと2つの要素を接続しますFIDDLE： https://jsfiddle.net/gy2y5dj2/