Live Droppable UI元素仅在第二次尝试时接受放置 [英] Live Droppable UI Element Only Accepts Drop on Second Try

问题描述

我有通过Ajax动态添加到页面的JQuery UI Droppables.尝试按照指导以实时方式连接Droppable:

I have JQuery UI Droppables that are dynamically added to the page via Ajax. Attempting to follow the guidance to connect the Droppables in a live manner:

jQuery UI Droppable:如何使其能够使用?

在第一次尝试拖放时，hoverClass不会挂机，放置目标也不会注册的Droppable(放置事件处理程序不会触发).在随后的尝试中，它会按预期工作.

On the first attempt to drag-and-drop, the hoverClass is not hooked up nor is the drop target a registered Droppable (the drop event handler does not fire). On subsequent attempts, it works as expected.

小提琴: http://jsfiddle.net/ericjohannsen/ESCN9/

如何使放置功能在第一时间工作?

How can I get the drop functionality to work the first time?

推荐答案

仅当将鼠标悬停在"ctFilterDropArea"元素上并启动实时可投放功能时，您的代码才能工作.

Your code works only when you hover on the "ctFilterDropArea" element and which initiates the live droppable functionality.

拖动另一个div后，尝试启动liveDroppable实现.

Try starting your liveDroppable implementation once the another div is dragged.

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

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!");
        }
    });
}

这篇关于Live Droppable UI元素仅在第二次尝试时接受放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！