jsPlumb makeSource() и jQuery sortable() плохо работают вместе

Я создаю пользовательский интерфейс, который позволяет пользователям создавать таблицы базы данных (и их поля и отношения) с помощью интерфейса перетаскивания.

Вот jsFiddle, который я создал. на самом деле просто минимум, необходимый для демонстрации проблемы. Вот мои требования, с которыми jsPlumb прекрасно справляется по отдельности, но я сталкиваюсь с проблемами, когда пытаюсь выполнить их все вместе. В частности, проблема заключается в сочетании № 2 и № 3.

1. «Таблицы» можно перетаскивать по холсту (используя jsPlumb.draggable())
2. «Поля» в таблице можно переупорядочивать, перетаскивая вверх/вниз (используя jQuery sortable())
3. пользователи могут перетаскивать, чтобы нарисовать новую «связь» между полями двух разных таблиц.
4. Соединительные линии между любыми двумя столами должны автоматически перерисовываться, когда столы перетаскиваются, чтобы они всегда соединялись с/с той стороны, которая ближе всего к «другому столу».

Чтобы выполнить пункт 4, я вызываю jsPlumb.makeSource() и jsPlumb.makeTarget() для каждой «плитки», представляющей поле, вместо того, чтобы создавать определенные конечные точки с правой и левой стороны каждой плитки. Таким образом, jsPlumb может управлять перерисовкой соединительных линий на той стороне плитки «поля», которая ближе к плитке, к которой она подключена.

Однако для выполнения #2 я применяю сортировку jQuery к полям, чтобы предоставить пользователю функцию «перетаскивания для изменения порядка». Это создает конфликт относительно того, какое «действие» вы запрашиваете, когда нажимаете на поле... сортировка или инициация соединения jsPlumb? Поэтому к каждому полю я добавляю красный div (с классом «.item-hit.area») и добавляю фильтр к вызову makeSource(), чтобы только этот красный div можно было использовать для создания нового соединения jsPlumb.

jsPlumb.makeSource($('.item'), {
    filter:function(event, element) {
        return ($(event.target).hasClass('item_hit_area'));
    }
    ....
}

Итак, теперь щелчок по красному div сообщает jsPlumb инициировать соединение, или щелчок в любом другом месте в элементе «поле» передается в jQuery sortable().

Надеюсь, эти требования понятны. Вот как воссоздать проблему.

• перетащите красную плитку на «Foo 1» на тело «Bar 2», чтобы нарисовать новую связь между двумя таблицами.
• перетащите таблицу foos (по ее названию), чтобы увидеть, что # 4 работает правильно (все строки перерисовываются правильно)
• теперь перетащите «Foo 1» вниз в списке элементов внутри «All my Foos», чтобы он был не самым верхним элементом в списке, а вторым или третьим элементом. Пока все хорошо, пока вы перетаскиваете, jsPlumb продолжает корректно обновлять соединительную линию.
• проблема возникает, когда вы затем перетаскиваете таблицу Foos, чтобы перемещать ее. Как только вы это сделаете, вдруг линия, соединяющая «Foo 1» с «Bar 2», окажется не в том месте. К сожалению, у меня недостаточно репутации в stackoverflow, чтобы опубликовать изображение. Но попробуйте, и вы увидите, что линия переходит не в то место.

Еще более странным является то, что если вы перетащите другую таблицу (таблицу «Все мои бары»), соединительная линия вернется в правильное положение на обоих концах. Только когда вы перетаскиваете таблицу, которая была на «исходной» стороне соединения jsPlumb, она запутывается и рисует линию не в том месте.