[英]Jquery draggable droppable can not show multi divs
我遵循可拖动和可拖放的ui jQuery,以尝试在特定区域中显示3个div。 这是代码:--CSS:
#content-1 { width: 200px; height: 100px; border: 1px solid red; display: none; }
#content-2 { width: 200px; height: 100px; border: 1px solid red; display: none; }
#content-3 { width: 200px; height: 100px; border: 1px solid red; display: none; }
--js:
$(function() {
$("#li-1").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
$("#content-1").show();
}
});
$("#li-2").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
$("#content-2").show();
}
});
$("#li-3").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
$("#content-3").show();
}
});
});
--HTML:
<div id="products">
<div id="catalog">
<div>
<ul>
<li id="li-1">dashboard-1</li>
<li id="li-2">dashboard2</li>
<li id="li-3">dashboard3</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<div class="ui-widget-content">
<div id="content-1"></div>
<div id="content-2"></div>
<div id="content-3"></div>
</div>
</div>
结果是它只能显示一个div。 此代码中的错误是什么? 提前致谢!
我很讨厌将您的代码放入http://jsbin.com,以查看那里发生了什么。 下次请自己动手做。
您的问题是,您要为相同的元素.ui-widget-content
定义相同的.droppable
函数。 因此,很自然,您需要重写同一功能的定义三次,只有最后一个定义有效。
这是您希望完成的方式:
$(function() {
$("#li-1").draggable({
appendTo: "body",
helper: "clone"
});
$("#li-2").draggable({
appendTo: "body",
helper: "clone"
});
$("#li-3").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
// Retrieving the id of the element being dragged
var element = ui.draggable.attr('id');
if (element == "li-1") {
$("#content-1").show();
} else if (element == "li-2") {
$("#content-2").show();
} else if (element == "li-3") {
$("#content-3").show();
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.