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

Я создал собственное вложенное меню ul-tree. Элементы дерева li можно сортировать даже на нескольких уровнях с помощью функций jQuery sortable() и droppable(). Вы просто перетаскиваете.

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

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

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

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

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


jquery jquery-ui jquery-ui-sortable nested-sortable
person Peter Westerlund    schedule 09.08.2012    source источник
comment
Мне пока не удалось решить эту проблему. Неужели никто не знает как сделать? :(   -  person Peter Westerlund    schedule 19.08.2012

Ответы (4)


arrow_upward
2
arrow_downward

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

Сортируемый

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

Выпадающий

$( 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 была какая-то интеграция/связь.

person Filep Long    schedule 02.10.2013
comment
активировать/деактивировать - это лучшие события, чем переключение для этого, потому что заполнитель будет отображаться, даже когда курсор с перетаскиваемым элементом отсутствует (поместите перемещение, а затем удалите в сторону). - person Roman Pokrovskij; 21.03.2015

arrow_upward
1
arrow_downward

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

Sortable + Droppable

Очень раздражает то, что плейсхолдер не исчезает при перетаскивании над первым подключенным Sortable (а возможно, и под последним), но я думаю, что так задумано. Если я отпущу перетаскиваемый элемент в Droppable вверху, он визуально окажется первым элементом в разделе «Культура», но программно для него будет установлено значение «Обложка выпуска» и он вернется в исходное положение в разделе «Люди».

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

person Hein Haraldson Berg    schedule 10.06.2014

arrow_upward
0
arrow_downward

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

JSFiddle

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

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

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

fit: draggable полностью перекрывает droppable пересечение: draggable перекрывает droppable не менее чем на 50% указатель: указатель мыши перекрывает droppable касание: draggable перекрывает droppable на любую величину

Примеры кода

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

//getter

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

//setter

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

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

person ericsaupe    schedule 10.08.2012
comment
Прошу прощения за мой неуверенный английский. Я пробовал с «толерантностью», но это не сработало. Красная линия-заполнитель-1px-line светится где-то все время, когда я перетаскиваю элемент li поверх других элементов li. Я хочу, чтобы заполнитель sortable() удалялся при наведении курсора. Попробуйте сами: jsfiddle.net/PeterWesterlund/8KDur/159. При перетаскивании элемента по дереву красный цвет иногда появляется в двух местах одновременно. Это не удобно для пользователя. - person Peter Westerlund; 10.08.2012
comment
Я вижу сейчас. Вы бы хотели, чтобы за один раз отображалась только одна красная вещь, будь то полоса в 1 пиксель или выделенный элемент. Я немного изменил JSFiddle, чтобы вы сделали еще один шаг вперед. Используя свойство over, вы можете вызывать функцию, когда что-то перетаскивается на выпадающий элемент. Что я сделал, так это просто удалил полосу в 1 пиксель, когда вы перетаскиваете что-то, однако она не появляется снова, когда вы перетаскиваете ее. Вам нужно будет сделать это с помощью параметра out и снова включить эту полосу в 1 пиксель. Это не полное решение вашей проблемы, но я надеюсь, что это поможет. - person ericsaupe; 11.08.2012
comment
Ну, я надеялся, что будет лучшее решение. Может быть, эти sortable() и droppable() смогли немного больше поговорить друг с другом. Что я могу повлиять на состояние заполнителей, если hoverClass существует или что-то в этом роде. - person Peter Westerlund; 11.08.2012
comment
Неужели больше ни у кого не было этой проблемы? - person Peter Westerlund; 12.08.2012

arrow_upward
0
arrow_downward

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

refreshPositions: true

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

person Germ Knol    schedule 18.07.2017