easy

DocsVersion : 0.1.0

Drag 拖拽组件

Define in : drag.js

拖拽组件可以创建一个拖拽实例,用鼠标对某个元素进行拖动,是很基础的组件,很多高级组件都需要用到拖拽组件。支持纵/横单向拖拽,可以设置拖拽的范围,如果想节省性能还可以使用代理模式。

Drag( target, [ options ] )

依赖
JS : 不依赖
CSS : 不依赖
HTML : 不固定
参数
  • target
    String|
    Element|
    easyJS Object
    必需

    target 可以是选择器字符串、DOM 元素,也可以是 easyJS Object,仅对第一个匹配元素进行拖拽绑定。

  • options
    Object
    可选

    多选形式的可配置参数。

下表列出多选可配置形式的参数的详细说明。

参数 数据类型 默认值 说明
axis String null

设置拖拽的方向,x是横向,y是纵向。

container String | Element | easyJS Object null

设置拖拽范围的容器元素,这样拖拽元素只能在指定的容器中进行拖拽。如果元素是 fixed 定位,将强制设置当前可视窗口为拖拽范围的容器元素。

handle String | Element | easyJS Object null

设置在指定的区域可触发拖拽的元素,未设置该值则该区域就是拖拽元素本身。

moveHand Boolean true

拖拽元素的鼠标手型是否为移动的手型。

proxy Boolean false

是否设置拖拽元素的代理模式,代理模式时并不会移动拖拽元素本身,仅会出现一个同尺寸的代理元素,如果拖拽元素本身的内容太多可能拖拽性能不好,此时可以使用代理模式。

refresh Boolean true

拖拽结束后,拖拽元素是否更新其位置。

属性
  • offsetLeft

    拖拽元素( 代理模式时为代理元素 )的 offsetLeft 定位值。

  • offsetTop

    拖拽元素( 代理模式时为代理元素 )的 offsetTop 定位值。

  • left

    拖拽元素( 代理模式时为代理元素 )的 left 定位值。

  • top

    拖拽元素( 代理模式时为代理元素 )的 top 定位值。

方法
  • destroy

    销毁拖拽实例。

  • on

    对拖拽实例绑定事件,该方法接受2个参数,第一个参数是事件类型,第二个参数是事件处理器,返回实例便于链式调用。

  • un

    卸载拖拽实例的事件。该方法接受1个事件类型的参数。返回实例便于链式调用。

下表列出了支持的事件类型。

事件类型 说明 事件对象
drag

拖拽过程中持续触发的事件,类似于 mousemove 的触发机制。

event.drag 拖拽元素本身。

event.pageX 鼠标指针的 X 轴位置。

event.pageY 鼠标指针的 Y 轴位置。

event.target 拖拽元素本身。

dragend

拖拽结束后触发的事件,类似于 mouseup 的触发机制。

event.drag 拖拽元素本身。

event.target 触发拖拽的元素。

dragstart

拖拽开始时触发的事件,类似于 mousedown 的触发机制。

event.drag 拖拽元素本身。

event.target 触发拖拽的元素。

在使用 Darg 组件前,对其进行加载。

E.use( 'drag', function(){
    // 在回调中实例化拖拽
});
例子1

对 div 元素绑定拖拽,不限定拖拽范围,在没设置定位时,拖拽组件会自动对齐自动设置相对定位,也支持设置了绝对定位、固定定位( 包括IE6的模拟 )。在拖拽开始和结束时对其背景进行修改。

box1

实例化拖拽组件。

var drag1 = new E.ui.Drag( '#box1' );

// 绑定拖拽开始时的事件
drag1.on( 'dragstart', function( e ){
        E( e.drag ).css( 'backgroundColor', '#666' );
    })
    // 支持链式调用,绑定结束时的事件
    .on( 'dragend', function( e ){
        E( e.drag ).css( 'backgroundColor', '#333' );
    });
例子2

对 div 元素绑定拖拽,设置拖拽区域,并限制其范围,在 3 次拖拽后销毁实例。

box3

实例化拖拽组件。

var count = 0,
    box2 = E( '#box2' ),
    parent = box2.parent(),
    drag2 = new E.ui.Drag( box2, {
        handle : '#box3',
        container : parent
    });

// 绑定拖拽结束的事件
drag2.on( 'dragend', function(){
    count++;
    
    if( count === 3 ){
        // 事件处理器中的this始终指向拖拽实例
        this.destroy();
    }       
});
例子3

对 div 元素绑定拖拽,设置代理拖拽模式。

box4

实例化拖拽组件。

new E.ui.Drag( '#box4', {
    proxy : true
});
例子4

对 div 元素绑定拖拽,拖拽结束后不更新其位置。

box5

实例化拖拽组件。

new E.ui.Drag( '#box5', {
    refresh : false
});
例子5

对 div 元素绑定拖拽,只允许其横向拖拽。

box6

实例化拖拽组件。

new E.ui.Drag( '#box5', {
    axis : 'x'
});