jquery ui selectable() and sortable() combine

Question

I am using a twitter jquery plugin to display a list (ul/li) of twitter posts .

Also I want my users to be able to rearrange the posts as they want and I want the moved post to be marked. I saw a post here how to do so. If I use this the selectable function doesn't work(I can rearrange but can't select):

$(document).ready(function() {

     $(".ul_sortable" ).sortable().selectable();
});

If I use this the sortable function doesn't work(I can select but cant re arrange):

$(".ul_sortable" ).sortable().selectable();

Answer 1

The key is to use the sortable handle option as shown in the link to the other question.

Sortable and selectable both take over the mouse events for the items they are applied to, however the handle option allows you to apply the sorting to a part of the item therefor allowing selectable to work on the rest of the item.

It should also be noted that selecting a bunch of items then sorting them all together is not natively supported.

For marking if an item is moved you can use a variety of sortable events such as stop and change docs