Перетащите его, опустите и снова перетащите, возвращаясь в исходное положение.

Question

Я хотел бы получить помощь по следующей ситуации.

У меня есть два столбца, один содержит числа, а другой - их перетаскивание.

Левый столбец можно перетаскивать, а правый столбец. Я хотел бы сделать правую колонку перетаскиваемой, так что, если пользователи передумают, они могут перетащить ее обратно в левый столбец и начать заново.

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

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

Пожалуйста см jsfiddle ссылку: Jsfiddle

Answer 1

Я сделал бы функции, которые вы можете передать объект для включения перетаскивания. Таким образом, это делает его легко сделать один тащили пункт перетаскиваемым снова, и это источник Droppable и т.д.

Рабочий пример: 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')); 
});