If I have a table which has selectable cells

 $("#selectTable").selectable({ filter: ">*>tr>td"});

and one of the cells contains a draggable div

$(".dragMe").draggable({});

HTML like so:

<table id="selectTable">
    <tr>
        <td>
        1
        </td>
        <td>
        2
        </td>
        <td>
        3
        </td>
        <td>
        <div class="dragMe">drag me</div>
        </td>
    </tr>
</table>

How do I stop the cell containing the div from being selectable?

I presume the div will intercept the click event before the table cell, but my attempts at using event.stopPropagation on the draggable element have led me nowhere so far...

Any suggestions or tips for using draggable inside a selectable parent would be most appreciated!

EDIT: It seems that adding the div element to the cancel option for the selectable almost works -

 $("#selectTable").selectable({ filter: ">*>tr>td", cancel: ':input,option,div'});

this prevents the div from being selected when you click on it, but not when you drag+select it along with surrounding elements.

Edit I've solved this now, the solution to this question can be found here