// 这里我们使用了一个类选择器建立了一个数组
// 这将使得我们很轻易地添加多个控制对象，如果我们决定要有多个可接受拖动元素的元素
var dragHandle = $('drag_handle');
var myDrag = new Drag.Move(dragElement , {
// Drag选项
handle: dragHandle
});
onStart——事件
onStart和它名字一样，当开始拖动时触发这个事件。如果你设置了一个很大的snap，这个事件将不会触发直到鼠标离开元素有指定的snap值那么远。
参考代码：
复制代码 代码如下:
var myDrag = new Drag.Move(dragElement , {
// Drag选项
// Drag选项将把拖动的元素作为参数传递
onStart: function(el) {
// 在这里放置开始拖动时你要做的任何事情
}
});
onDarg——事件
这个onDrag事件，将会在你拖动一个元素时连续地触发。
参考代码：
复制代码 代码如下:
var myDrag = new Drag.Move(dragElement , {
// Drag选项
// Drag选项将把拖动的元素作为参数传递
onDrag: function(el) {
// 在这里放置开始拖动时你要做的任何事情
}
});
onComplete——事件
最后是onComplete事件，将在你放下一个拖动元素时触发，而不管你是不是把它放到了一个可以接受拖动元素的元素内部。
参考代码：
复制代码 代码如下:
var myDrag = new Drag.Move(dragElement , {
// Drag选项
// Drag选项将把拖动的元素作为参数传递
onComplete: function(el) {
// 在这里放置开始拖动时你要做的任何事情
}
});
代码示例
让我们把刚才的这些代码以一种方式组合起来，当不同的事件触发时，我们突出显示不同的内容，并且我们使用上面我们看到的选项来配置我们的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: absolute”，然后一定要设置可拖动元素的left和top属性。现在，如果你正在为其他浏览器构建并且遵循此规则，你可以忽略这一部分：
参考代码：
复制代码 代码如下:
/* 下面这个定义通常是不错的主意 */
body {
margin: 0
padding: 0
}
/* 确保可拖动的元素有"position: absolute" */
/* 并设置开始时的left和top属性 */
#drag_me {
width: 100px
height: 100px
background-color: #333
position: absolute
top: 0
left: 0
}
#drop_here {
width: 200px
height: 200px
background-color: #eee
}
/* 确保拖动的容器有“position:relative” */
#drag_cont {
background-color: #ccc
height: 600px
width: 500px
position: relative
margin-top: 100px
margin-left: 100px
}
#drag_me_handle {
width: 100%
height: auto
background-color: #666
}
#drag_me_handle span {
display: block
padding: 5px
}
.indicator {
width: 100%
height: auto
background-color: #0066FF
border-bottom: 1px solid #eee
}
.indicator span {
padding: 10px
display: block
}
.draggable {
width: 200px
height: 200px
background-color: blue
}
现在我们再建立我们的HTML：
参考代码：
复制代码 代码如下: