Need help to re-enable dragging of a draggable

I have a draggable element

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

I have two issues:

1. After this element is droppe开发者_StackOverflow中文版d, the original gets disabled automatically.

2. A close anchor tag is appended to the dropped element. On click of this 'close' the original element should again become draggable and should be removed from the droppable 'div'.

I have written a handler for the close anchor as follows, it removes the element from the droppable but it doesn't make it draggable aggain.

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

Please help. Thanks in advance.

The answer for the first issue is set the disabled option of the draggable element as false.

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

On handler for close anchor, enable the draggable object which you want to drag. For example,

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

I assume you disabled the draggable in the the Drop event (?)
$(ui.draggable) was still in context there. however in the click event you cannot access the draggable object anymore and instead you should select the element you want to drag directley. e.g : $("#element").draggable("enable")

I've done a similar thing where I create an array to hold the index of the dropped draggable, like this:

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

Then to re-enable the draggable in your cancel function, you would do something like this:

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

I'm guessing that the element that is returned by $(this).parent() matches the elements in your selector for the droppable, if not, you'll have to do a different traversal.

The basic idea is to find the index of the dragged item, store that in the dragged array at the position equal to the index of the item on which it is dropped. Then on cancel, you use the index of the item where the draggable was dropped to get the value from the dragged array that matches the original draggable position and then enable that.