Question

我正在尝试使用jquery ui droppable。我有一组可能使用或不使用的元素。如果不使用它们，它们会出现在列表中，我想让我的用户将它们放入页面中。

但是，出于一些奇怪的原因，没有一个可放弃的事件正在开火。我正在使用jquery 1.11.1，以及相应的UI版本

代码很基本

$("#cameras_section").resizable({
    containment: "#body_size"
}).draggable({
    containment: "#body_size"
}).droppable({
    accept: "#body_size", over: function(event, ui) {
        alert('over')
    }, out: function(event, ui) {
        alert('out')
    }, drop: function(event, ui) {
        alert('dropped')
    }
});

你可以看到它不起作用here（注意：我确实通过html检查程序运行它，唯一的错误是我必须纠正的字符集错误）

Answer 1

您的draggable和droppable是相同的元素。我不确定你要做什么，因为你没有提供相关的HTML，但是，我相信如果你将可调整大小，可拖动和可放置的初始化器（和元素）分开，你将会在正确的轨道。

以下是docs。

中的示例

HTML

<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>

JS

$("#draggable").draggable();
$("#droppable").droppable({
    drop: function (event, ui) {
        $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
    }
});

FIDDLE

不能在droppable中工作的事件

1 个答案: