[英]jQuery Drag and Drop not working
我正在尝试开发一个简单的拖放式“游戏”。 简单来说,您要做的就是将各种项目拖放到一个区域中,根据所拖动的项目,它会说对还是错。 到目前为止,这是我所拥有的,并且根本无法正常工作,我不知道为什么。 我对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>
现在,它可以正常工作了,我需要更多可拖动图像实例,但是当我添加更多实例时,已添加的新实例将不起作用。
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")
...
这有效: 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! :(");
}
}
});
});
哈哈好吧,Alex似乎已经锁定了这一功能。
答案是: http : //jsfiddle.net/aGqHh/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.