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

Question

这应该超级简单。 我读了很多例子，却弄不清楚我在做什么错。 我仅用JavaScript就能在大约20分钟的时间内完成此操作，因此我必须丢失一些显而易见的内容，如果这是一个愚蠢的问题，我深表歉意。 不是创建测试场景，而是创建一个简单的JSFiddle，该JSFiddle应该允许用户将单词移动到框中。 我无法启动drop函数。 在我的测试环境中，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事件的文档：

当将可接受的可拖动对象放置在可放置对象上时触发（ 基于公差选项 ）。

accept选项的默认值为* ，这意味着默认情况下，当将任何 draggable对象拖放到drop事件时，它将触发drop事件。

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

“相交”：在两个方向上，可拖动对象与可放置对象重叠至少50％。

在您的提琴中，您的可放置对象的定义宽度很小。 但是，您的可拖动对象却没有。 这意味着您的可拖动对象是容器的整个宽度，该宽度比可放置对象的宽度宽得多，因此不可能相交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/