остановить распространение от перетаскиваемого div до выбираемой таблицы

Question

Если у меня есть таблица с выбираемыми ячейками

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

и одна из ячеек содержит перетаскиваемый div

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

HTML вроде так:

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

Как сделать так, чтобы ячейка, содержащая div, была недоступна для выбора?

Полагаю, div будет перехватывать событие click перед ячейкой таблицы, но мои попытки использовать event.stopPropagation для перетаскиваемого элемента пока что ни к чему не привели ...

Буду признателен за любые предложения или советы по использованию перетаскиваемого объекта внутри выбранного родителя!

EDIT: Кажется, что добавление элемента div к опции отмены для выбираемого почти работает -

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

это предотвращает выбор элемента div при нажатии на него, но не при его перетаскивании + выделении вместе с окружающими элементами.

Редактировать Я решил это сейчас, решение этого вопроса можно найти здесь

Answer 1

Я знаю, что это старый вопрос, но у меня была похожая проблема с тегом, который нельзя щелкать в таблице, в которой были выбираемые ячейки.

Как насчет следующего:

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

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

Answer 2

попробуйте поставить return false в конце метода click вашего перетаскиваемого элемента.