jqueryjquery-uidraggabledroppable

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 dropped, 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.


Solution

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