<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/effects.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/dragdrop.js"></script>
<style type="text/css">
body {
background-color:#1b2d3d;
color:#fff;
font-size:12px;
}
div.div1{
width:210px;
min-height:330px;
background-color:#324d65;
margin-left:50px;
float:left;
color:#FFFFFF;
}
div.div2{
width:200px;
height:100px;
margin-top:10px;
}
div.div2 li.li1{
width:200px;
background-color:#98b125;
min-height:20px;
color:#000;
cursor:move;
}
div.div2 li.li2{
width:200px;
background-color:#FFFFFF;
min-height:50px;
color:#000;
}
.dummyDestinationStyle { border:3px dashed #C0C0C0; margin-top:12px; position:absolute; }
</style>
<script type="text/javascript">
var dragoption_ = function(){
var dragoption = {
tag:'div',
handle: 'handler',
// only: 'widjet',
// overlap: 'vertical',
constraint: false,
containment:['list1', 'list2'],
dropOnEmpty: true,
delay: 300,
scroll: window,
onChange: function(elem) {//마우스로 이동하는 중간중간 계속 이동함.
if ($("dummyDestinationDiv")) {
$("dummyDestinationDiv").remove();
}
elem.insert({before:'<div id="dummyDestinationDiv" class="dummyDestinationStyle" style="width:'+(elem.getWidth()-7)+'px; //height:'+(elem.getHeight()-15)+'px;"></div>'});
},
onUpdate: function(tab) {
if ($("dummyDestinationDiv")) {
$("dummyDestinationDiv").remove();
}
}
}
return dragoption;
}
document.observe('dom:loaded', function() {
Sortable.create('list1', dragoption_());
Sortable.create('list2', dragoption_());
});
</script>
</head>
<body>
<div id="list1" class="div1">
<div id="handler" class="div2">
<li class="li1">Content 1</li>
<li class="li2">첫번째 박스 이동합니다.</li>
</div>
<div id="handler" class="div2">
<li class="li1">Content 2</li>
<li class="li2">두번째 박스 이동합니다.</li>
</div>
<div id="handler" class="div2">
<li class="li1">Content 3</li>
<li class="li2">세번째 박스 이동합니다.</li>
</div>
</div>
<div id="list2" class="div1">
<div id="handler" class="div2">
<li class="li1">Content 4</li>
<li class="li2">네번째 박스 이동합니다.</li>
</div>
<div id="handler" class="div2">
<li class="li1">Content 5</li>
<li class="li2">다섯번째 박스 이동합니다.</li>
</div>
<div id="handler" class="div2">
<li class="li1">Content 6</li>
<li class="li2">6번째 박스 이동합니다.</li>
</div>
</div>
</body>
</html>
'JavaScript > scriptaculous' 카테고리의 다른 글
| Scriptaculous Sortable.create (0) | 2010.08.25 |
|---|