拖动它，将其放下并再次拖回原来的位置

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