将其拖放，然后将其拖回原始位置

Question

我想获得关于以下情况的帮助。

我有两列，一列包含数字，另一列是通过拖放来接收它们。

左栏可拖动，右栏可放下。 我想让右列可拖动，所以如果用户改变了主意，他们可以将其拖放到左栏并重新开始。

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

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

请参阅的jsfiddle链接：Jsfiddle

Answer 1

我会让你可以传递对象启用拖放功能。通过这种方式，可以很容易地使一个拖动的项目拖动再次和它的源头可放开等

工作实例：https://jsfiddle.net/Twisty/nuopmqnb/

jQuery的

$(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')); 
});