需要帮助来重新启用可拖动对象的拖动

Question

我有一个可拖动元素

$(".element").draggable({
helper: "clone",
revert: 'invalid',
containment: '#parent',
appendTo: '#parent'
});

我有两个问题：

1. 删除此元素后，原始元素会自动禁用。

2. 关闭锚标记将附加到放置的元素上。单击此“关闭”后，原始元素应再次变为可拖动，并应从可放置的“div”中删除。

我已经为关闭锚点编写了一个处理程序，如下所示，它从可放置元素中删除元素，但不会使其再次可拖动。

$('.cancel a',ui.helper).click(function()
{
   $(ui.helper).remove();
   $(ui.draggable).draggable('enable');
});

请帮忙。 提前致谢。

Answer 1

第一个问题的答案是将可拖动元素的禁用选项设置为 false。

    $(".element").draggable({
      helper: "clone",
      revert: 'invalid',
      disabled: false,
      containment: '#parent',
      appendTo: '#parent'
    });

在关闭锚点的处理程序上，启用要拖动的可拖动对象。例如，

    $('.cancel a',ui.helper).click(function()
    {
       $(ui.helper).remove();
       $('#element').draggable('enable');
    });

Answer 2

我假设您在 Drop 事件中禁用了可拖动功能（？）
$(ui.draggable) 仍然在上下文中。
但是，在单击事件中，您无法再访问可拖动对象，而应该直接选择要拖动的元素。例如： $("#element").draggable("enable")

Answer 3

我做了类似的事情，我创建一个数组来保存删除的可拖动对象的索引，如下所示：

var $drop = $(selector for my droppable),
    $drag = $(selector for my draggable),
    dragged = [];
$drop.droppable({
    drop: function (e, ui) {
        var dragIndex = $drag.index(ui.draggable);
        dragged[$drop.index($(this))] = dragIndex;
    }
});

然后要在取消函数中重新启用可拖动对象，您将执行以下操作：

$('.cancel a').click(function() {
    var clickIndex = $(selector for droppable).index($(this).parent()),
        whichDrag = dragged[clickIndex];
    $drag.eq(whichDrag).draggable("enable");
});

我猜该元素$(this).parent() 返回的内容与选择器中可放置元素的元素相匹配，如果不是，则必须进行不同的遍历。

基本思想是找到被拖动项目的索引，将其存储在dragged数组中，其位置等于其被拖放的项目的索引。然后，在取消时，您可以使用可拖动项所在的索引来从与原始可拖动位置匹配的 draged 数组中获取值，然后启用该值。