1

我正在尝试开发一个简单的拖放“游戏”。简单来说，您所做的就是将各种项目拖放到一个区域中，它会根据拖动的项目说正确或错误。这是我到目前为止所拥有的，它根本不起作用，我不知道为什么。我对 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/

4

3 回答 3

0

哈哈好吧，亚历克斯似乎锁定了这个。

有答案：http: //jsfiddle.net/aGqHh/1/

于 2012-04-24T15:05:14.717 回答
0 
var currentId = $(this).attr('id');
if (currentId == "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")
    ...
于 2012-04-24T13:54:59.250 回答
0

这有效：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! :(");
            }
        }
    });
});
于 2012-04-24T14:00:43.987 回答