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

Question

这应该非常简单。我读了很多例子，但无法弄清楚我做错了什么。我只使用 JavaScript 在大约 20 分钟内就完成了这个任务，所以我一定错过了一些明显的东西，如果这是一个愚蠢的问题，我深表歉意。我没有输入我的测试场景，而是创建了一个简单的 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 事件的文档:

Triggered when an accepted draggable is dropped on the droppable (based on the tolerance option).

accept 选项的默认值为 *，这意味着当 any< 时，默认情况下它将触发 drop 事件/em> draggable 被放入其中。

第二个是您刚刚离开的地方:基于容差选项。 容差的默认值为:

"intersect": Draggable overlaps the droppable at least 50% in both directions.

在你的 fiddle 中，你的 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));
}

这是 fiddle :http://jsfiddle.net/ramrgeop/