拖放，回到原来的位置，然后用jquery UI再次拖动答案

【问题标题】：Dragging/Dropping, returning to original position, and then dragging again with jquery UI拖放，回到原来的位置，然后用jquery UI再次拖动
【发布时间】：2014-01-04 11:12:26
【问题描述】：

我有一些代码从一个大的对象列表拖到一个较小的对象列表。拖动后，我希望能够单击按钮并将拖动的对象返回到更大的列表中。

这是一个演示这个想法的小提琴。 http://jsfiddle.net/q43ab/46/

但是，如您所见，一旦返回，draggable 就不能再次拖动。小提琴设置为使用 .html() 来获取可拖动的 div，然后再次使用 .html() 将可拖动的 div 设置回原来的位置，如下所示：

$(".remove").click(function(){
var removedbox = $(".candrop").html();
$(".candrop").empty();
//$(removedbox).appendTo(".holder:empty");
$(".holder:empty").html(removedbox);

// re-set any empty tiles to once again accept drops
$(".candrop").droppable("option", "accept", ".candrag");
});

我也尝试在可拖动中使用取消选项，但无济于事（但也许我做得不对）。

知道如何获得这种“拖动、删除、再次拖动”功能吗？

【问题讨论】：

stackoverflow.com/questions/6583153/…
谢谢，但这不是我想要的。我不希望动画将它带回来，并且可拖动对象不一定要回到它的原始起始位置，只是回到更大的列表。任何人，我解决了这个问题，但有些事情告诉我发生了一些有趣的事情。

标签： jquery jquery-ui-draggable

【解决方案1】：

我想出了一个解决方案，尽管有人告诉我这可能不是最好的解决方案。

我不得不在 .click 处理程序中重新定义 .draggable 函数，因为尽管具有适当的类，但原始 .draggable 函数似乎无法识别 div 的新实例。

我更新了小提琴以显示工作示例： http://jsfiddle.net/q43ab/47/

小提琴中使用的javascript：

$(".candrag").draggable({
  cursor: "move",
  helper: "clone",
  revert: "invalid",
  appendTo: ".candrop"
});

$(".candrop").droppable( {
  accept: ".candrag",
  hoverClass: "onhover",
  drop: onDrop
});

function onDrop( event, ui ) {
    var pos = $(this).position();
    $(ui.draggable).css({position: 'static', top: pos.top,left: pos.left}).draggable("option", "containment", "#currentteamcontainer").appendTo(this);

    // disallow the recent slot from accepting any more tiles
    $(this).droppable("option", "accept", "");
};

$(".remove").click(function(){
var removedbox = $(".candrop").html();
$(".candrop").empty();
//$(removedbox).appendTo(".holder:empty");
$(".holder:empty").html(removedbox);

//re-define the .draggable function within the .click remove event
$(".candrag").draggable({
  cursor: "move",
  helper: "clone",
  revert: "invalid",
  appendTo: ".candrop"
});

// re-set any empty tiles to once again accept drops
$(".candrop").droppable("option", "accept", ".candrag");

});

希望它可以帮助其他一些可怜的灵魂，这样他们就不会在凌晨 4 点醒来试图解决这个问题。

ps。抱歉，如果我的术语有误，这不是我的强项。

【讨论】：