Mootools 1.2教程(12)——用Drag.Move实现拖拽和拖放（3）

代码示例

让我们把刚才的这些代码以一种方式组合起来，当不同的事件触发时，我们突出显示不同的内容，并且我们使用上面我们看到的选项来配置我们的Drag.Move对象：

参考代码： 

window.addEvent('domready', function() { 
    var dragElement = $('drag_me'); 
    var dragContainer = $('drag_cont'); 
    var dragHandle = $('drag_me_handle'); 
    var dropElement = $$('.draggable'); 
    var startEl = $('start'); 
    var completeEl = $('complete'); 
    var dragIndicatorEl = $('drag_ind'); 
    var enterDrop = $('enter'); 
    var leaveDrop = $('leave'); 
    var dropDrop = $('drop_in_droppable');  

    var myDrag = new Drag.Move(dragElement, { 
    // Drag.Move选项 
    droppables: dropElement, 
    container: dragContainer, 
    // Drag选项 
    handle: dragHandle, 
    // Drag.Move事件 
    onDrop: function(el, dr) { 
        if (!dr) { } 

        else { 
            dropDrop.highlight('#FB911C'); //橙色闪烁 
            el.highlight('#fff'); //白色闪烁 
            dr.highlight('#667C4A'); //绿色闪烁 
        }; 
    }, 
    onLeave: function(el, dr) { 
        leaveDrop.highlight('#FB911C'); //橙色闪烁 
    }, 
    onEnter: function(el, dr) { 
        enterDrop.highlight('#FB911C'); //橙色闪烁 
    }, 
    // Drag事件 
    onStart: function(el) { 
        startEl.highlight('#FB911C'); //橙色闪烁 
    }, 
    onDrag: function(el) { 
        dragIndicatorEl.highlight('#FB911C'); //橙色闪烁 
    }, 
    onComplete: function(el) { 
        completeEl.highlight('#FB911C'); //橙色闪烁 
    } 
    }); 
}); 

注意一下CSS：在IE中，为了能够适合地注册Drag.Move的容器，你需要在下面的CSS中明确地指出它的位置。最重要的一点是你需要记住设置容器的位置为“position: relative”，而设置可拖动的元素的位置为“position: absulute”，然后一定要设置可拖动元素的left和top属性。现在，如果你正在为其他浏览器构建并且遵循此规则，你可以忽略这一部分：

参考代码： 

/* 下面这个定义通常是不错的主意 */ 
body { 
    margin: 0 
    padding: 0 
} 

/* 确保可拖动的元素有"position: absulute" */ 
/* 并设置开始时的left和top属性 */ 
#drag_me { 
    width: 100px 
    height: 100px 
    background-culor: #333 
    position: absulute 
    top: 0 
    left: 0 
} 


#drop_here { 
    width: 200px 
    height: 200px 
    background-culor: #eee 
} 

/* 确保拖动的容器有“position:relative” */ 
#drag_cont { 
    background-culor: #ccc   
    height: 600px  
    width: 500px 
    position: relative 
    margin-top: 100px 
    margin-left: 100px 
}  

#drag_me_handle { 
    width: 100％ 
    height: auto 
    background-culor: #666 
} 

#drag_me_handle span { 
    display: block 
    padding: 5px 
} 


.indicator { 
    width: 100％ 
    height: auto 
    background-culor: #0066FF 
    border-bottom: 1px sulid #eee 
} 

.indicator span { 
    padding: 10px 
    display: block 
} 

.draggable { 
    width: 200px 
    height: 200px 
    background-culor: blue 
} 

现在我们再建立我们的HTML：

参考代码：  

<div id="drag_cont"> 
    <div id="start" class="indicator"><span>拖动开始</span></div> 
    <div id="drag_ind" class="indicator"><span>拖动中</span></div> 
    <div id="complete" class="indicator"><span>拖动结束</span></div> 
    <div id="enter" class="indicator"><span>进入了Droppable元素</span></div> 
    <div id="leave" class="indicator"><span>离开了Droppable元素</span></div> 
    <div id="drop_in_droppable" class="indicator"><span>放进了Droppable元素</span></div> 
    <div id="drag_me"> 
    <div id="drag_me_handle"><span>控制对象</span></div> 
    </div> 

    <div id="drop_here" class="draggable"> </div> 
</div>

更多学习……

这里是文档中一些相关的章节：

Drag
Drag.Move

下载一个包含你开始所需要的所有东西的zip包

包含MooTouls 1.2核心库、MooTouls 1.2扩展库，一个包含你的函数的外部JavaScript文件，一个定义你的样式的外部CSS文件，一个简单的HTML文件和上面的例子。