How to make jQuery UI sortable divs dragged only from an icon?

Question

I've used some jQuery UI sortable plugins but I always found the same problem, I can't select or click inside the sortable DIVs, So, maybe I can find the solution by putting an icon from where you only can drag the div so you can be able to select the other part.

How to do that?

Answer 1

In each of your sortable items, include whatever you'd like as your handle. (IE, an img or a styled span.) Give the handle element(s) a class name — handle might be a good choice.

In your sortable constructor, set the handle selector to the class you've given to your handles.

$('#div').sortable({
    handle: '.handle',
    cursor: 'move',
    ...
});

I'd also recommend giving your handle element a style of .handle { cursor:move; } so the user has some indication that grabbing it will allow them to move the item around.

Answer 2

The draggable handle.