在mootools中实现元素的拖动很简单，下面演示了两种方式。
方式一：对要拖动的DOM元素设置“makeDraggable”，如下：
var myDrag = $('myElement').makeDraggable({
onStart:function()
{
this.element.setOpacity(.5);
},
onComplete: function(){
this.element.setOpacity(1);
this.element.style.left = 0;
this.element.style.top = 0;
alert('done dragging');
}
});
方式二：将对象拖动到指定元素中，使用Drag.Move，其方法声明如下：
语法:
var myMove = new Drag.Move(myElement[, options]);
参数:
el - (element) 要拖动的元素。
选项集合 - (object, optional) 如下
选项集合:
All the base Drag options, plus:
container - (element)
可拖动元素的容器，可拖动元素的拖动范围被限制在该容器的大小和位置。
默认为false(即没有限制)
droppables - (array) 一个数组，表示一系列你的可拖动元素可以被drop到的目标对象。
事件:
drop - Executed when the element drops. Passes as argument the element
and the
element dropped on. If dropped on nothing, the second
argument is null.
leave - Executed when the element leaves one of the droppables.
enter - Executed when the element enters one of the droppables.
下面是其使用的DEMO:
var myMove = new Drag.Move($('myElement_logo'), {
droppables: $$('div.item'),
onSnap: function(){ // due to MooTool's inheritance, all [Drag][]'s Events are also available.
this.moved = this.moved || 0;
this.moved++;
if(this.moved > 1000){
alert("You've gone far enough.");
this.stop();
}
},
onDrop: function(element, droppable){
if (!droppable) consolelog(element, ' dropped on nothing');
else consolelog(element, 'dropped on', droppable);
droppable.addClass('dropped');
//设置元素位置
element.setStyles({
top: droppable.getOffsets().y,
left: droppable.getOffsets().x
});
},
onEnter: function(element, droppable){
consolelog(element, 'entered', droppable);
droppable.addClass('dragover');
},
onLeave: function(element, droppable){
consolelog(element, 'left', droppable);
droppable.removeClass('dragover');
droppable.removeClass('dropped');
}
});
接下来是全部的DEMO代码:
<!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">
<head>
<title>拖动</title>
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
<style type="text/css">
body
{
color: #000;
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
}
#dragger
{
width: 100px;
height: 100px;
border: 1px solid pink;
position: relative;
z-index: 50;
padding: 4px;
}
.item
{
top: 150px;
width: 100px;
height: 100px;
border: 3px solid blue;
position: relative;
float: left;
margin: 2px;
padding: 2px;
}
.drag
{
background-color: #EFE;
}
.dragover
{
border: 3px solid #900;
background-color: #FEE;
color: #000;
}
.dropped
{
border: 3px solid #009;
background-color: #339;
color: #FFF;
}
.console{
top: 250px;
position: relative;
float: left;
margin: 5px;
padding: 4px;
}
</style>
</head>
<body>
<img id="myElement" src="images/index.jpg" alt="index.jpg" style="width: 94px;" title="Drag.Move" />
<br />
<br />
<br />
<img id="myElement_logo" src="images/logo.png" alt="index.jpg" style="width: 106px;
height: 106px; z-index: 100;margin: 2px;" title="Drag.Move" />
<div id="Item1" class="item">
Item 1</div>
<div id="Item2" class="item">
Item 2</div>
<div id="Item3" class="item">
Item 3</div>
<div id="Item4" class="item">
Item 4</div>
<br />
<div id="output">
</div>
</body>
</html>
<script type="text/javascript">
//**********************************拖动
1(index.jpg)************************************//
var myDrag = $('myElement').makeDraggable({
onStart:function()
{
this.element.setOpacity(.5);
},
onComplete: function(){
this.element.setOpacity(1);
//this.element.style.left = 0;
//this.element.style.top = 0;
alert('done dragging');
}
});
//var myDrag = $('myElement').makeResizable({
// onComplete: function(){
// alert('Done resizing.');
// }
//handle: 'resizeExampleHandleLimited',
//modifiers:
{x: false, y:'height'} /*限制在垂直方面上调整尺寸*/<
/span>
//});
/*********************************拖动
2(myElement_logo)***********************************//
var myMove = new Drag.Move($('myElement_logo'), {
droppables: $$('div.item'),
onSnap: function(){ // due to MooTool's inheritance, all [Drag][]'s Events are also available.
this.moved = this.moved || 0;
this.moved++;
if(this.moved > 1000){
alert("You've gone far enough.");
this.stop();
}
},
onDrop: function(element, droppable){
if (!droppable) consolelog(element, ' dropped on nothing');
else consolelog(element, 'dropped on', droppable);
droppable.addClass('dropped');
element.setStyles({
top: droppable.getOffsets().y,
left: droppable.getOffsets().x
});
},
onEnter: function(element, droppable){
consolelog(element, 'entered', droppable);
droppable.addClass('dragover');
},
onLeave: function(element, droppable){
consolelog(element, 'left', droppable);
droppable.removeClass('dragover');
droppable.removeClass('dropped');
}
});
function consolelog(element, action, droppable)
{
output.innerHTML = element.id + ' ' + action + ' '+ droppable.id;
}
</script>
下面是演示效果：
好了，今天的内容就到这里了。
下载DEMO，请点击这里。
tag:mootools, 1.2
作者：代震军, daizhj
原文链接：http://www.cnblogs.com/daizhj/articles/1291590.html
posted on 2008-09-16 12:50
代震军 阅读(602)
评论(0) 编辑 收藏 网摘