对 div 元素绑定拖拽,不限定拖拽范围,在没设置定位时,拖拽组件会自动对齐自动设置相对定位,也支持设置了绝对定位、固定定位( 包括IE6的模拟 )。在拖拽开始和结束时对其背景进行修改。
实例化拖拽组件。
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' ); });
对 div 元素绑定拖拽,设置拖拽区域,并限制其范围,在 3 次拖拽后销毁实例。
实例化拖拽组件。
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(); } });
对 div 元素绑定拖拽,设置代理拖拽模式。
实例化拖拽组件。
new $.ui.Drag( '#box4', { proxy : true });
对 div 元素绑定拖拽,拖拽结束后不更新其位置。
实例化拖拽组件。
new $.ui.Drag( '#box5', { refresh : false });
对 div 元素绑定拖拽,只允许其横向拖拽。
实例化拖拽组件。
new $.ui.Drag( '#box5', { axis : 'x' });