Question

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.

Answer 1

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.