CODEWITHSUNDEEP
jqueryjquery-ui
user993563
user993563

Reputation: 19431

jqueryui portlets in column sorting

I am using jQuery UI sortable portlets. The jqueryui sortable page refers to the documentation where you have event handlers attached if the portlets are moved from one column to the other, the recieve function takes care of the stuff, as shown below:

 $( ".column" ).sortable({
        connectWith: ".column",
        placeholder: 'ui-state-highlight',
        handle: 'h6',
        revert: true,
        receive: function(event, ui) {
         console.log(ui.item);
        }, 
         over: function(event, ui){
             console.log(ui.item);
        }

The over function as stated above, i thought would log if the element is moved up/down in the same column. But this does not happen.

So, how do i get an event when one portlet has been moved up/down within the same column.

A simple fiddle is located here.

Upvotes: 3

Views: 1092

Answers (4)

Avinash R
Avinash R

Reputation: 3151

i've forked your snippet to work with your requirement it only uses the change event for the purpose.

Here the trick is to keep track of the column of the portlet before an after the change. (Done through the hasColumnChange function)

The downside of using the change event is that it seems to fire twice, I don't know why, but nevertheless it should satisfy you.

Upvotes: 0

apcelent
apcelent

Reputation: 1651

The change function will do the trick. 

$( ".selector" ).sortable({
   change: function(event, ui) { ... }
});
Bind to the change event by type: sortchange.
$( ".selector" ).bind( "sortchange", function(event, ui) {
  ...
});

Upvotes: 0

Nathan
Nathan

Reputation: 11159

The sort event seems to be equivalent to the over event, but within a column. The difference between sort and change is that sort fires as you move the element and change fires after you let go of the mouse and the element settles into its position.

sort : function (event, ui) {
    console.log(ui.item);
}

The events are well documented on the jQuery UI pages. Look through each of them to see which is most appropriate for your needs.

Upvotes: 1

Frédéric Hamidi
Frédéric Hamidi

Reputation: 263117

You seem to be looking for the change event, which is triggered when a sortable element's position is updated, even in the same column:

$(".column" ).sortable({
    connectWith: ".column",
    placeholder: "ui-state-highlight",
    handle: "h6",
    revert: true,
    receive: function(event, ui) {
        console.log(ui.item);
    },
    change: function(event, ui) {
        console.log(ui.item);
    }
});

You will find an updated fiddle here.

Upvotes: 3

Related Questions