mootools 拖拽变化效果-优快云博客

本文介绍了一个使用ClientSide库实现的拖拽效果示例。通过简单的HTML结构与JavaScript代码结合，实现了多个可拖动元素到指定区域的功能，并带有视觉反馈效果。

!---->

Code
!--<script src="http://www.clientcide.com/scripts/clientside.moo.v1.2.packed.js"></script>-->
<style>
#draggables {
    height: 100px;
    position: relative;
}

#draggables div {
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
    cursor: move;
    background: #c17878;
    position: absolute;
}

#droppables div {
    float: left;
    margin: 10px;
    width: 100px;
    height: 100px;
    background: #1d1d20;
}

</style>
<div id="draggables">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>

<div id="droppables">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
</div>

<script language="javascript">

$$('#draggables div').each(function(drag){
    new Drag.Move(drag, {
    droppables: $$('#droppables div'),
    'onDrag':function(x,y){
    x.setStyle('background-color', '#faec8f');
},
     'onEnter': function(x,y){
    y.setStyle('background-color', '#78ba91');
},
     'onLeave': function(x,y){
    y.setStyle('background-color', '#1d1d20');
},
    'onDrop':function(x,y){
    x.dispose();
    y.set('morph',{transition:Fx.Transitions.Back.easeOut});
    y.morph({
                'height': y.getStyle('height').toInt() + 30,
                'background-color' : ['#78ba91', '#1d1d20']
            });

}
    });
})
</script>

转载于:https://www.cnblogs.com/zjm1126qqcom/archive/2009/05/27/1490701.html