jQuery draggable:sortable

Question

Hi, I am using the JQuery libs to implement drag and drop.

How do I get at the element that is being dragged when it is dropped into sortable list?

I want to get the id of the div being dragged. The following element is dragged:

<div class="control" id="control[1]" >
  <img src="img/controls/textfield.png" />
</div>

I have the standard dragging function from their example

$(".control").draggable({
  connectToSortable: '#sortable',
  helper: 'clone'
});

function stop in dragging section with next code return proper value

stop: function(event, ui) {
  alert(ui.helper.attr('id'));
}

And this is sortable element:

<ul id="sortable"><li>test</li></ul>

and his function:

$("#sortable").sortable({
  revert: true,
  accept: '.control',
  receive: function(event, ui) { 
    // here i need to get draggable element id
  }
});

I have tried various ui.id etc which doesnt seem to work.

receive: function(event, ui) { 
  $(ui.draggable).attr("id")
}

throws undefined.

Thanks,

Answer 1

Try

receive: function(event, ui) { 
  $(ui.item).attr("id")
}

According to the documentation the receive (indeed all callbacks for sortable) get two arguments. The second argument should contain:

• ui.helper - the current helper element (most often a clone of the item)
• ui.position - current position of the helper
• ui.offset - current absolute position of the helper
• ui.item - the current dragged element
• ui.placeholder - the placeholder (if you defined one)
• ui.sender - the sortable where the item comes from (only exists if you move from one connected list to another)

Answer 2

From the jQuery UI draggable docs:

If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.

See http://docs.jquery.com/UI/API/1.7/Droppable

Answer 3

I had a similar problem, and had troubles accessing the helper element in the start event. What I ended up doing was setting the helper attribute to a function which returned some custom HTML. I was able to access that HTML in the start event without any problems.

helper: function() {
    return '<div id="myHelper">This is my custom helper.</div>';
}

Answer 4

I've got a similar problem, which I've posted here: http://stackoverflow.com/questions/2095691/jquery-manipulate-dropped-element-in-sortable-list

I am using a combination of draggable & sortable too (as I want to keep the first list without changing anything - a sort of master list). And so far it works well.

But I want to manipulate the dropped element in the sortable list, and can't seem to do it.

$(".dragrow1").sortable({
receive: function(event, ui) {
  var dropElemTxt = $(ui.item).text();
  var dropElemId = $(ui.item).attr('id');
  $(ui.item).replaceWith('<li class="box">Hello World</li>');
}
});

Unfortunately $(ui.item) is accessing the master element. I tried $(this) as well, but this accesses the .dragrow div. Any idea how I can access the dropped element?

Answer 5

Seems a bit hacky - but worked it out! I have to use $('.dragrow1 li:last')

Answer 6

It seems like the context of ui.item changes between the beforeStop event and receive event.

In my case I'm trying to set the id of the item to a generated value and

receive: function (event, ui) { ui.item.attr("id", "control" + currentControlId++);}

doesn't work for me

So you can work around this :

beforeStop: function (event, ui) { itemContext = ui.item.context;},
receive: function (event, ui) { $(itemContext).attr("id", "control" + currentControlId++);}