Question

这应该是超级简单的。我阅读了大量的例子，无法弄清楚我做错了什么。我能够在大约20分钟内使用JavaScript做到这一点，所以我必须遗漏一些明显的东西，如果这是一个愚蠢的问题，我道歉。我没有输入我的测试场景，而是创建了一个简单的JSFiddle，它允许用户将单词移动到框中。我无法启动掉落功能。在我的测试环境中，drop函数会触发，但单词总是在框外。

http://jsfiddle.net/nuander/3htow95z/5/

知道我做错了吗？

注意：StackOverflow希望我在这里重新输入所有代码，所以这里有JSFiddle中的内容

<div id="Moveable1">Move me 1</div>
<div id="Target1" class="target"></div>

.target { width:200px; height:100px; border:1px solid #000}

$(document).ready(function () {
    $("#Moveable1").draggable();
    $("#Target1").droppable({ drop: dropItem });
});

function dropItem(ev, ui) {
    alert("dropped");
    $(this).append($(ui.draggable));
}

Answer 1

你太近了。以下是drop事件的文档：

在droppable上删除已接受可拖动时触发（基于容差选项）。

accept选项的默认值为*，这意味着当任何 drop时，默认情况下会触发draggable事件掉进去了。

第二个是你刚刚离开的地方：基于公差选项。 tolerance的默认值为：

“intersect”：Draggable在两个方向上至少重叠50％的droppable。

在你的小提琴中，你的droppable有一个小的定义宽度。但是，你的拖拽不会。这意味着你的draggable是容器的整个宽度，它比droppable宽得多，因此不可能相交50％。

如果您将intersect切换为touch，您将看到事件正常触发，因为在这种情况下，可拖动只需要与可放置的任何数量相交。

$(document).ready(function () {
    $("#Moveable1").draggable();
    $("#Target1").droppable({        
        tolerance: 'touch',
        drop: dropItem
    });
});

function dropItem(ev, ui) {
    alert("dropped");
    $(this).append($(ui.draggable));
}

这是小提琴：http://jsfiddle.net/ramrgeop/

使用jQuery将一个div移动到另一个div

1 个答案: