Question

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

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

然而，正如你所看到的，一旦返回拖动，第二次就无法拖动。小提琴设置为使用.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");
});

我还试图在draggable中使用Cancel选项，但无济于事（但也许我没有做对了）。

任何想法我如何得到这个＆＃34;拖动，删除，再次拖动＆＃34;功能？

Answer 1

我找到了一个解决方案，虽然有些东西告诉我它可能不是最好的解决方案。

我不得不在.click处理程序中重新定义.draggable函数，因为看起来div的新实例没有被原始.draggable函数识别，尽管有适当的类。

我已经更新了小提示以显示工作示例： 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。对不起，如果我的术语有误，那不是我的强项。

拖动/拖放，返回到原始位置，然后使用jquery UI再次拖动

1 个答案: