mootools Drag.Move效果
2009-05-26 16:00 贪婪的小猪 阅读(312) 评论(0) 编辑 收藏 举报
!---->
Code
!--<script src="http://www.clientcide.com/scripts/clientside.moo.v1.2.packed.js"></script>-->
<style>
#containment {
height: 210px;
width: 330px;
background: #eee;
position: relative;
}
#dragger {
height: 20px;
width: 20px;
background: #000;
position: absolute;
top: 0;
left: 0;
}
div.dropper {
margin-left: 10px;
margin-top: 10px;
float: left;
height: 40px;
width: 30px;
background: #ff3300;
}
</style>
<div id="containment">
<div id="dragger"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
</div>
<script language="javascript">
var droppables = $$('div.dropper');
var container = $('containment');
new Drag.Move('dragger', {
'container': container,
'droppables': droppables,
'onEnter': function(x,y){
y.setStyle('background-color', '#000');
},
'onLeave': function(x,y){
y.setStyle('background-color', 'pink');
},
'onDrop':function(x,y){
y.setStyle('background-color', 'yellow');
}
});
</script>
!--<script src="http://www.clientcide.com/scripts/clientside.moo.v1.2.packed.js"></script>-->
<style>
#containment {
height: 210px;
width: 330px;
background: #eee;
position: relative;
}
#dragger {
height: 20px;
width: 20px;
background: #000;
position: absolute;
top: 0;
left: 0;
}
div.dropper {
margin-left: 10px;
margin-top: 10px;
float: left;
height: 40px;
width: 30px;
background: #ff3300;
}
</style>
<div id="containment">
<div id="dragger"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
<div class="dropper"><!-- --></div>
</div>
<script language="javascript">
var droppables = $$('div.dropper');
var container = $('containment');
new Drag.Move('dragger', {
'container': container,
'droppables': droppables,
'onEnter': function(x,y){
y.setStyle('background-color', '#000');
},
'onLeave': function(x,y){
y.setStyle('background-color', 'pink');
},
'onDrop':function(x,y){
y.setStyle('background-color', 'yellow');
}
});
</script>