Скрыть сортируемый заполнитель при срабатывании hoverClass

Question

Я построил свое собственное вложенное меню ul-tree. Li-элементы дерева можно сортировать даже на нескольких уровнях, используя jQuery sortable() и droppable (). Вы просто перетаскиваете.

Итак, моя проблема сейчас заключается в том, что оба элемента: "sortable() placeholder" и "droppable() hoverClass" подсвечиваются при перетаскивании элемента над зонами других элементов droppable ().

Вот мой текущий код:

http://jsfiddle.net/PeterWesterlund/8KDur/89/

Вопрос: как сделать так, чтобы сортируемый заполнитель не выделялся при срабатывании зависания droppable ()?

Таким образом, выделяется только место, где будет размещен выбранный элемент.

Answer 1

Была точно такая же проблема. мое решение

Сортируемый

$(".scrollPane", ui).sortable({
    //...
    placeholder: "ui-state-highlight myPlaceholder"
})

Droppable

$( container ).droppable({
    //...
    over: function( event, ui ){
        $(this).parent().addClass("hide-placeholder")
    },
    out: function( event, ui ){
        $(this).parent().removeClass("hide-placeholder")
    }
})

CSS (меньше)

.hide-placeholder{
    .myPlaceholder {
        visibility:hidden;/*display:none*/
    }
}

Хотелось бы, чтобы между этими различными концепциями D & D была какая-то интеграция / коммуникация

Answer 2

Я испытываю эту проблему сейчас, и я сделал этот рисунок, чтобы проиллюстрировать:

Это действительно раздражает, как заполнитель не исчезнет при перетаскивании над первым подключенным Сортируемым (и, вероятно, также под последним), но я думаю, что это дизайн. Если я отпущу перетаскиваемый элемент в Droppable в верхней части, он визуально окажется первым элементом в разделе Культура, но программно он будет установлен на Issue Cover и вернется в исходное положение в разделе People.

Скрытие заполнителя с использованием CSS или удаление его с помощью JS создает только смещение, которое даже не исправляется с помощью хаков, как, например, использование внутренних компонентов jQUI: $.ui.ddmanager.prepareOffsets($.ui.ddmanager.current, null);

Answer 3

Решение, поместите это в свой сортируемый список опций:

refreshPositions: true

Теперь вам больше не нужно ничего скрывать!

Answer 4

Я не уверен, что полностью понимаю, что вы спрашиваете, но используя свойство:tolerance: "fit" Вы можете установить различные допуски для обработки капли.

JSFiddle

Вот список возможных вариантов:

Толерантность

Указывает, какой режим использовать для проверки того, является ли перетаскиваемый объект "над". Возможные значения: "подгонка", "пересечение", "указатель", "касание".

Подгонка: перетаскивание перекрывает перетаскиваемый объект полностью пересекается: перетаскивание перекрывает перетаскиваемый указатель, по меньшей мере, на 50%: указатель мыши перекрывает опускаемое касание: перетаскиваемый элемент перекрывает опускаемый предмет в любом размере

Примеры кода

Инициализируйте droppable с указанным параметром допуска. $( ".selector" ).droppable({ tolerance: "fit" }); Получить или установить допуск после инициализации.

//getter

var tolerance = $( ".selector" ).droppable( "option", "tolerance" );

//setter

$( ".selector" ).droppable( "option", "tolerance", "fit" );

Более подробную информацию можно найти здесь под опциями.