Question

我试图提高我的web-dev工作技能，但是jQuery的拖放功能有点让人失望。不幸的是，我无法让droppable的“掉落”或“结束”事件发生。

我不想使用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”事件。该代码中的调试器行永远不会被命中。

以下是我如何设置draggable / droppable：

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

任何意见将不胜感激。谢谢:)）

编辑：

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

Answer 1

that你想要的是什么吗？

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

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

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

1 个答案: