CODEWITHSUNDEEP
jqueryjquery-uidrag-and-drop
Phill
Phill

Reputation: 223

jQuery UI Draggable - Retain drag-ability after drop

I have a list of items. I want to drag a clone of an item from the list to a table - so far so good.

When the item is dragged to the table I would like to be able to drag that item to a different cell in the table. I am hoping someone can help with this. The code I have so far is as follows:-

$('.drag').draggable({
      cursor:'move',     
      helper:'clone'
});

$('.dog_drop').droppable( {
      drop: handleDropEvent   
  } );

function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
  $(ui.draggable).clone().appendTo($(this)),      
  // ajax in here
}

I would be very grateful for any advice you can provide.

Many thanks in advance Phill

Upvotes: 0

Views: 682

Answers (1)

Nabil Ali
Nabil Ali

Reputation: 157

You want to find the new appended item and run draggable() function on it.

For example if the .drag item is a link you can do the following:

$('.drag').draggable({
  find: '.dog_drop',
  cursor:'move'
});

$('.dog_drop').droppable( {
    drop: handleDropEvent
  } );

function handleDropEvent( event, ui ) {
    var $this = $(this);
    $this.append(ui.draggable);

    $('.dog_drop').find('div:last').draggable({
      cursor:'move'
    });  

  // ajax in here
}

Make sure to select the last item so it can work with multiple items.

Upvotes: 1

Related Questions