使用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/