ドラッグして落として元の位置に戻して再度ドラッグしてください

Question

私は以下の状況について助けを求めます。

私は2つの列を持ち、1つは数字を含み、その他はドラッグアンドドロップで受け取ります。

左の列はドラッグ可能で、右の列は削除可能です。 私は右の列もドラッグ可能にしたいと思っています。そのため、ユーザーが気が変わった場合、ドラッグして左の列に戻してからやり直すことができます。

$('.draggable').draggable({ 
    revert: true 
}); 

$('.droppable').droppable({ 
    drop: function(e, ui) { 
    $(this).html(ui.draggable.html()); 
    $(ui.draggable).html(''); 
    } 
}); 

jsfiddleのリンクを参照してください：私はあなたがドラッグ＆ドロップを有効にするためにオブジェクトを渡すことができます機能になるだろうJsfiddle

Answer 1

を。

実施例など、それが再び1つのドラッグしたアイテムをドラッグ作ることが容易になり、それがソースドロップ可能です。このように：jQueryのhttps://jsfiddle.net/Twisty/nuopmqnb/

が

$(function() { 
    function makeDrag($o) { 
    $o.draggable({ 
     revert: true, 
     stop: function(e, ui) { 
     if (!$(this).find("img").size()) { 
      $(this) 
      .removeClass("draggable") 
      .addClass("droppable") 
      .draggable("destroy"); 
      makeDrop($(this)); 
     } 
     } 
    }); 
    } 

    function makeDrop($o) { 
    $o.droppable({ 
     drop: function(e, ui) { 
     var $img = $("<img>", { 
      src: ui.draggable.find("img").attr("src") 
      }), 
      $target = $(e.target); 
     ui.draggable.html(""); 
     $target.html($img); 
     $target.droppable("destroy"); 
     makeDrag($target); 
     return false; 
     } 
    }); 
    } 

    makeDrag($('.draggable')); 
    makeDrop($('.droppable')); 
});