0
我跟着jQuery UI可拖動和droppable嘗試在特定區域顯示3個div。 下面是代碼: --css:jquery可拖放droppable不能顯示多個div
#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 。這段代碼中的錯誤是什麼? 在此先感謝!
我肯定會調整,以避免所有的硬編碼的東西的功能。否則,每次你添加一個li到html,js代碼都必須改變...... – excentris 2013-04-25 20:22:32
@netrunner,肯定是男人,這只是一個例子來解釋那裏發生了什麼。 – 2013-04-25 20:30:30