CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggablejquery-ui-sortable
Nikolai
Nikolai

Reputation:

How to access the id of draggable element which is dropped into sortable

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 doesn't seem to work.

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

throws undefined.

Update:

Sorry, my fault :) As my mother used to tell - "Read API before coding". ui.item.attr('id') works fine.

Upvotes: 17

Views: 29576

Answers (9)

nomasgabo
nomasgabo

Reputation: 1

$( "#sortable1" ).sortable({
  connectWith: ".connectedSortable",
  cancel: ".disabledItem",
  items: "li:not(.disabledItem)",
  receive: function(event,ui){

  **var page = ui.item.attr('value');**

  var user = $("#select_users").val();

Upvotes: -2

Mr2P
Mr2P

Reputation: 56

You can use a custom data attribute to store the id of the dragged items. This attribute is still there on the dropped items. The source code as following:

<div class="..." data-id="item_id">
    ...
</div>

Using $('dropped item").data('id') in the sortable to get the id like:

$("#sortable").sortable({
  ...,
  receive: function(e, ui) { 
      var id = ui.item.data('id');
  }
});

Upvotes: 0

Khawar
Khawar

Reputation: 145

I had success using the beforeStop event for the sortable.

From here

beforeStop: This event is triggered when sorting stops, but when the placeholder/helper is still available.

$( "#something" ).sortable({
  beforeStop: function(event, ui) {
     //you should check if ui.item is indeed the one you want!
     item_id = $(ui.item).attr('id');
     $(ui.item).html('I'm changing the dropped element in the sortable!');
  }
});

Upvotes: 1

kami
kami

Reputation: 997

Yes, that's a problem when you mixing sortables draggables droppables etc. Make sortable container as droppable as well:

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

$('#sortable').droppable({
    accept: '.control',
    drop: function(e, ui){
        var your_draggable_element = $(ui.draggable);
        var your_helper = $(ui.helper);
    }
});

that should work

Upvotes: 2

Catalin DICU
Catalin DICU

Reputation: 4638

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

Upvotes: 8

WastedSpace
WastedSpace

Reputation: 1143

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

Upvotes: 0

ironkeith
ironkeith

Reputation: 769

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

Upvotes: 2

karim79
karim79

Reputation: 342795

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

Upvotes: 1

Steerpike
Steerpike

Reputation: 17554

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)

Upvotes: 28

Related Questions