Как заставить сортируемый элемент инициировать сортировку по его верхней границе или заголовку (а не полагаться на местоположение мыши)

Question

Я реализовал сортируемую панель инструментов с виджетами на основе примера сортируемых портлетов jQuery,

Некоторые из виджетов больше других (их высота больше), и когда я перетаскиваю их между столбцами (при первоначальном щелчке по их центру) и ожидаю появления заполнителя, мне нужно перетащить большой центр виджета (где указатели мыши), чтобы мышь находилась прямо под целевым виджетом (имеется в виду, когда верхняя граница перетаскиваемого виджета находится над целевым виджетом)

Здесь a: Пример jsfiddle

Нажмите на вертикальный центр большого виджета и попробуйте поместить его под другим виджетом. Если бы вы делали это, щелкая заголовок большого виджета, было бы намного проще перетащить его под другой виджет (местозаполнитель появился бы сразу)

Еще одна вещь, по неизвестной причине в моем реальном веб-приложении (а не в примере с jsfiffle), даже когда я перетаскиваю большой виджет из его заголовка, он действует так, как я держал виджет из его вертикального центра ... любой Идеи почему?

B.T.W: я не хочу использовать параметр cursorAt для решения этой проблемы ...

Спасибо,

Answer 1

В конце концов я решил это, изменив класс .colum padding-bottom: с 100px на 300px

Answer 2

Я не уверен на 100%, что понимаю вопрос, но я думаю, что вы хотите иметь возможность перетаскивать портлеты только по заголовкам (поэтому центр «перетаскивания» будет центром заголовка).Если это так, вы можете добавить

handle: ".portlet-header"

к вашим сортируемым параметрам.

$(".column").sortable({
        connectWith : ".column",
        handle: ".portlet-header"
    });

Пример: http://jsfiddle.net/3LKj4/1/