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

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?

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.

The draggable handle.