jQuery“drop”和“over”不会在 droppable 上触发

Question

我试图提高我的 web 开发技能以适应工作，但对 jQuery 的拖放功能有点不知所措。不幸的是，我无法触发 droppable 的“drop”或“over”事件。

我不想使用 jQuery 表格拖放插件，所以我在 td 结构中的一个 div 中有多个 div（全部在 $(document).ready 中生成）。中间的 div 是可放置的，最里面的 div 是可拖动的。生成的 HTML 如下所示：

<td class="vertical">
<div id="droppable3" class="droppable ui-droppable" style="width: 100%; height: 100%;"
over="function () { alert("working!"); }" 
drop="function (event, ui) { 
    debugger;
    var firstDrag = ui.draggable;
    var secondDrag = $(this).childNodes[0];
    var destDrop = $(this);
    var sourceDrop = firstDrag.parent;
    $("#middle").append("first drag:" + firstDrag.id + "\nSecondDrag:" + secondDrag.id
     + "\ndest Drop:" + destDrop.id + "\nsourceDrop:" + sourceDrop.id); }">
        <div id="draggable3" class="draggable ui-draggable" 
        style="width: 100%; height: 100%;">
        </div>
</div>
</td>

除了id之外，其他的TD完全一样。

现在拖动似乎工作正常；我可以将那个内部 div 拖出来，如果我不把它放在适当的 droppable 上，它就会恢复原状，或者如果我这样做，它就粘在那里，但它永远不会触发“over”或“drop”事件。该代码中的调试器行永远不会被命中。

这是我设置可拖动/可放置的方式：

function getTD(claz){
var td = jQuery("<td/>",{'class': claz});
var droppable = jQuery("<div/>",{
    'class': 'droppable',
    width: '100%',
    height:'100%',
    id: "droppable"+ids[index],
    over: function() {
        alert('working!');
    },
    drop: function(event,ui){
        debugger;
        var firstDrag = ui.draggable;
        var secondDrag = $(this).childNodes[0];
        var destDrop = $(this);
        var sourceDrop = firstDrag.parent;
        $("#middle").append("first drag:"+firstDrag.id +"\nSecondDrag:"+secondDrag.id
            +"\ndest Drop:"+destDrop.id +"\nsourceDrop:"+sourceDrop.id);

        }
    });
    var draggable = jQuery("<div/>",{
        'class': 'draggable',
        width: '100%',
        height:'100%',
        id: "draggable"+ids[index], 
    });

    draggable.draggable({
        revert: 'invalid'
    });
    droppable.droppable({
        accept: ".draggable"
    });
    index++;
    droppable.append(draggable);
    td.append(droppable);
    return td;

}

基本上我想要实现的是表格中的可交换图块，我很确定事件处理程序中的 js 是垃圾，但一旦它启动，我们就会处理它。

哦，我正在使用： https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js

任何 cmets 将不胜感激。 谢谢:)

编辑：

我真的很愚蠢。我将“drop”和“over”事件放在元素的属性中，而不是 droppable 的选项中！

Answer 1

that 是你想要的吗？

请注意，您应该使用这样的回调创建一个 droppable

$("#something").droppable({
    drop: function(event, ui) {
        // action
    },
    over: function() {
        // action
    }
});