[英]How can I make.droppable in jQuery UI work?
I designed a simple drag and drop game to train my jQuery UI skills but for some reason I can not drop the circle on the same colored square. 我设计了一个简单的拖放游戏来训练我的jQuery UI技能,但是由于某些原因,我无法将圆圈放到相同颜色的正方形上。 And when it works it goes behind the square instead of being on top :(. What did I do wrong in my code?
并且当它起作用时,它位于正方形后面而不是在顶部:(。我的代码在做什么错?
(In my snippet the circle snaps to the square but in chrome it doesn't) (在我的代码段中,圆圈捕捉到了正方形,但是在chrome中却没有)
Fiddle: https://jsfiddle.net/2udcoyjt/ 小提琴: https : //jsfiddle.net/2udcoyjt/
JS here: JS在这里:
$(".draggers").draggable({
revert: 'invalid'
});
$(".droppers").droppable({
accept: function(item) {
return $(this).data("color") == item.data("color");
},
drop: function(event, ui) {
var $this = $(this);
ui.draggable.position({
my: "center",
at: "center",
of: $this,
using: function(pos) {
$(this).animate(pos, 150, "linear");
}
});
}
});
You must use the ids of the droppers to define the accept and drop options for each, as the droppable the accept function is run on every drag event (start, stop, enter, leave), as well as on drags along the edge of the page. 您必须使用放置控件的ID来定义每个控件的接受和放置选项,因为在每个拖动事件(开始,停止,输入,离开)以及沿着控件边缘的拖动操作上都将运行可放置接受功能页。 Try
尝试
console.log($(this).data.data("color") )
and you will see that you get red blue on every event (start, stop, enter, leave ..) 并且您会看到在每个事件中(开始,停止,进入,离开..)都会显示红色蓝色
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.