Живой выпадающий элемент пользовательского интерфейса допускает выпадение только со второй попытки

У меня есть JQuery UI Droppables, которые динамически добавляются на страницу через Ajax. Попытка следовать инструкциям по подключению Droppables в режиме реального времени:

JQuery UI Droppable: как заставить его работать?

При первой попытке перетаскивания hoverClass не подключается, и цель перетаскивания не является зарегистрированным Droppable (обработчик события перетаскивания не срабатывает). При последующих попытках работает как положено.

Скрипт: http://jsfiddle.net/ericjohannsen/ESCN9/

Как я могу заставить функцию перетаскивания работать с первого раза?


jquery jquery-ui jquery-ui-droppable
person Eric J.    schedule 15.02.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Ваш код работает только тогда, когда вы наводите курсор на элемент «ctFilterDropArea», и это инициирует функцию «живого сброса».

Попробуйте запустить реализацию liveDroppable после перетаскивания другого div.

JSFiddle: - http://jsfiddle.net/ESCN9/3/

$.fn.liveDroppable = function (opts) {
    if (!$(this).data("ctDropInit")) {
        $(this).data("ctDropInit", true).droppable(opts);
    }
};

$('#dragMe').draggable({
    cursor: "move",
    distance: 20,
    opacity: 0.7,
    helper: 'clone',
    start: startDroppable
});

function startDroppable() {
    $('#ctFilterDropArea').liveDroppable({
        hoverClass: "ctDropHover",
        drop: function (event, ui) {
            alert("Dropped!");
        }
    });
}
person Aditya Singh    schedule 15.02.2013