本帖最後由 test155 於 2010-5-12 09:06 編輯
body
<body>
<div id=Main>
<div id=ListA1>
<div id=accordion>
<h2>E</h2>
<div id=list1>
<div id="e1" class="A1">E(1)</div>
<div id="e2" class="A1">E(2)</div>
<div id="e3" class="A1">E(3)</div>
</div>
<h2>P</h2>
<div id=list1>
<div id="p1" class="A1">P(1)</div>
<div id="p2" class="A1">P(2)</div>
<div id="p3" class="A1">P(3)</div>
</div>
<h2>S</h2>
<div id=list1>
<div id="s1" class="A1">S(1)</div>
<div id="s2" class="A1">S(2)</div>
<div id="s3" class="A1">S(3)</div>
</div>
</div>
</div>
<div id=ListA2>
<h2>ListA2</h2>
<div id=list2>
<div id="St" class="A2">Start</div>
<div id="e1" class="A1">E(1)</div>
<div id="e2" class="A1">E(2)</div>
<div id="e3" class="A1">E(3)</div>
<div id="p1" class="A1">P(1)</div>
<div id="p2" class="A1">P(2)</div>
<div id="p3" class="A1">P(3)</div>
<div id="s1" class="A1">S(1)</div>
<div id="s2" class="A1">S(2)</div>
<div id="s3" class="A1">S(3)</div>
</div>
</div>
</div>
</body>
css
@charset "utf-8";
/* CSS Document */
h2 {
border-bottom: #f6f6f6 2px solid;
margin: 5px;
text-align: center;
color: #0033FF;
cursor: pointer;
}
#Main {
text-align: center;
margin: 0px auto;
width: 600px;
height: 560px;
}
#ListA1 {
background-color: #dedede;
width: 250px;
float: left;
}
#ListA2 {
background-color: #dedede;
width: 250px;
float: right;
min-height: 560px;
}
.A1 {
border-top: #999 1px solid;
border-bottom: #999 1px solid;
border-right: #999 1px solid;
border-left: #999 1px solid;
text-align: center;
line-height: 40px;
background-color: #00FF66;
margin: 5px auto;
width: 200px;
height: 40px;
cursor: move;
}
.A2 {
border-top: #999 1px solid;
border-bottom: #999 1px solid;
border-right: #999 1px solid;
border-left: #999 1px solid;
text-align: center;
line-height: 40px;
background-color: #99FF00;
margin: 5px auto;
width: 200px;
height: 40px;
cursor: move;
}
#list1 #list2 {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
JavaScript
// JavaScript Document
$(function() {
$(".A1").draggable({
helper: 'clone',
revert: 'invalid',
scroll: false
});
$("#list2").droppable({
accept: '.A1',
drop: function(ev, ui)
{
if (ui.draggable.parent().attr("id") == "list2")
{
var $a = $(ui.draggable);
}
else
{
var $a = $(ui.draggable).clone();
}
$(this).append($a);
$a.draggable();
}
});
$('body').droppable({
accept: '#list2 .A1',
drop: function(ev, ui)
{
$a = $(ui.draggable);
$a.empty().addClass('A2');
}
});
$("#accordion").accordion({collapsible: true});
});
我拖拉到body把它變成空值。
如果我想再從list1的A1物件，拖拉到空值物件上覆蓋
是如何取值和不會讓他在堆疊？
在$(".A1").draggable再加上判斷嗎？
if (ui.draggable.parent().attr("class") == "A2") | 
發表於 2010-5-12 08:48
| 
發表於 2010-5-13 08:52
|