Drag demo #view docs


例子1

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

box1

实例化拖拽组件。

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

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

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

box3

实例化拖拽组件。

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

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

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

box4

实例化拖拽组件。

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

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

box5

实例化拖拽组件。

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

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

box6

实例化拖拽组件。

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