JQuery перетаскивание не "принимает" мою каплю

Question

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

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

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

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

Answer 1

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

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

tolerance:"touch"

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

tolerance:"pointer"

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

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