CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
user993563
user993563

Reputation: 19431

getting the id of the portlet that is moved in jQuery UI

I am using jQuery UI sortable portlets to all the portlets I assign a data id. The HTML structure for one portlet element can be seen as follows:

 <div class="portlet" data-id= "6">
        <div class="portlet-header"><h6>Heading</h6></div>
        <div class="portlet-content">First Person</div>
        <div class="portlet-content">10</div>
      </div>

Now as similar to the demo as in the link above, I have three columns. To all the columns I have given an id of 1, 2, 3. 

<div class="column" id="1">

the portlet structure resides inside these divs.

Now when a portlet is moved from one column to another, I can easily get the id of the column to which it has been placed as follows:

$( ".column" ).sortable({
    connectWith: ".column",
    handle: 'h6',
    receive: function(event, ui) {
      console.log(this);
    }

The only thing I want to get is, the data-id of the portlet that has been moved.

How can I get that? The jsFiddle is here.

Upvotes: 4

Views: 862

Answers (1)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263117

The element that was moved is available in the item property of the ui argument passed to the receive handler, so you can write:

console.log(ui.item.data("id"));

You will find an updated fiddle here.

Upvotes: 4

Related Questions