javascript - jQuery "drop"和 "over"未在可放置对象上触发

Question

我正试图提高我的网络开发技能以供工作，但对 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>

除了ids，其他TD完全一样。

现在拖动似乎工作正常；我可以将那个内部 div 拖出，如果我不把它放在适当的可放置位置上，它会恢复原状，或者如果我这样做了，它就会恢复原状，但它永远不会触发“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;

基本上我想要实现的是表格中的可交换图 block ，我很确定事件处理程序中的 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

如有任何意见，我们将不胜感激。 谢谢:)

编辑:

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

Answer 1

是that你想要什么？

请注意，您应该像这样创建一个带有回调的可放置对象

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