jQuery перетаскивает, не «принимая» мое падение

0

Это, наверное, простая вещь, которую я просматриваю, но я пытаюсь реализовать перетаскивание на моем сайте. Однако, похоже, он не работает. Я создал демонстрацию скрипки, которая демонстрирует странное поведение. Вот мой код:

$(function() {
    $("li", "#hostsList").draggable({
        revert: "invalid",
        cursor: "move",
        containment: "document"
    });

    $("#selectedHosts").droppable({
        accept: "#hostsList > li",
        drop: function(event, ui) {
        alert("Dropped!");
    }
});

В скрипке я пытаюсь перетащить "тест №1" или "тест №2" в зону зеленого div, но он не работает. Любая помощь будет оценена!

Теги:
drag-and-drop
jquery-ui-droppable
jquery-ui-draggable

1 ответ

2
Лучший ответ

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

Вы можете исправить это, установив

tolerance:"touch"

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

tolerance:"pointer"

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню