jQuery拖放不起作用

Question

我正在嘗試開發一個簡單的拖放式“游戲”。 簡單來說，您要做的就是將各種項目拖放到一個區域中，根據所拖動的項目，它會說對還是錯。 到目前為止，這是我所擁有的，並且根本無法正常工作，我不知道為什么。 我對JS和jQuery的了解也有很多不足。

<script>
$(function() {
    $( "#draggable" ).draggable();
    $( "#wrong" ).draggable();

    $( "#droppable" ).droppable({    
        drop: function( event, ui ) {
            var currentId = $(this).attr('id');
            if (currentId == "draggable") {
                $( this )
                    .addClass( "highlight" )
                    .find( "p" )
                    .html( "Correct! :)" );
            } else {
                $( this )
                    .find( "p" )
                    .html( "Wrong! :(" );
            }
        }
    }); 
});
</script>

現在，它可以正常工作了，我需要更多可拖動圖像實例，但是當我添加更多實例時，已添加的新實例將不起作用。

http://jsfiddle.net/KcruJ/9/

Answer 1

var currentId = $(this).attr('id');
if (currentId == "draggable")
    ...

永遠不會結果為true，因為$(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable $(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable [1]

嘗試：

var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable")
    ...

Answer 2

這有效： http : //jsfiddle.net/T6nu3/2/

---

$(this).attr('id');

將始終返回droppable 。 您需要訪問拖動的元素：

$(ui.draggable).attr('id');

請查看jQuery UI文檔以獲取更多信息。

碼：

$(function() {
    $("#draggable").draggable();
    $("#wrong").draggable();

    $("#droppable").droppable({
        drop: function(event, ui) {
            var currentId = $(ui.draggable).attr('id');
            if (currentId == "draggable") {
                $(this).addClass("highlight").find("p").html("Correct! :)");
            } else {
                $(this).find("p").html("Wrong! :(");
            }
        }
    });
});

Answer 3

哈哈好吧，Alex似乎已經鎖定了這一功能。

答案是： http ： //jsfiddle.net/aGqHh/1/