位置：首页>> 网络编程>> JavaScript>> Mootools 1.2教程(12)——用Drag.Move实现拖拽和拖放（2）

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

作者：Fdream　来源：Fdream博客　发布时间：2008-12-05 12:29:00　

标签：mootools,拖拽,Drag.Move,拖放,javascript

一些Drag事件和选项

对于Drag，有许多选项和事件，不过这里我们只看一小部分。

snap——选项

snap选项可以让你设置用户的鼠标至少移动多少个像素后开始拖动。默认是6，你额可以设置为任何数字或者值为数字的变量。很明显，这里有一些合理的限制（比如设置snap为1000将毫无用处），但是这在定制你的用户体验时将会派上用场。

参考代码：

var myDrag = new Drag.Move(dragElement , {
// Drag选项
snap: 10
});

handle——选项

handle可以给你的拖动元素添加一个控制对象。这个控制对象将成为唯一的可以接受“抓取”（拖动）的元素，从而允许你使用其他的元素做一些其他的事情。要设置一个控制对象，只需调用这个元素就可以了。

参考代码：

// 这里我们使用了一个类选择器建立了一个数组
// 这将使得我们很轻易地添加多个控制对象，如果我们决定要有多个可接受拖动元素的元素
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) {
        // 在这里放置开始拖动时你要做的任何事情
    }
});

第一页上一页 1

3 下一页

投稿

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

猜你喜欢