来自http://threedubmedia.com/demo/drag/
来自http://www.biuuu.com/?p=591
1. Basic Drag
Drag the blue box around the page, by default you cannot begin dragging within ":input" elements.
$('#demo1_box').bind('drag',function( event ){ $( this ).css({ top: event.offsetY, left: event.offsetX });});
2. Axis Drag
Drag the blue box along the x-axis. Hold "shift" to drag along the y-axis.
$('#demo2_box').bind('drag',function( event ){ $( this ).css( event.shiftKey ? {top: event.offsetY } : {left: event.offsetX});});
3. Grid Drag
Drag the blue box around the page, notice it snaps to a 20 pixel grid.
$('#demo3_box').bind('drag',function( event ){ $( this ).css({ top: Math.round( event.offsetY/20 ) * 20, left: Math.round( event.offsetX/20 ) * 20 });});
4. Handle Drag
Drag the blue box around the page using the "handle" only.
$('#demo4_box') .bind('dragstart',function( event ){ return $(event.target).is('.handle'); }) .bind('drag',function( event ){ $( this ).css({ top: event.offsetY, left: event.offsetX }); });
5. Active Drag
The box turns green while dragging around the page.
$('#demo5_box') .bind('dragstart',function( event ){ if ( !$(event.target).is('.handle') ) return false; $( this ).addClass('active'); }) .bind('drag',function( event ){ $( this ).css({ top: event.offsetY, left: event.offsetX }); }) .bind('dragend',function( event ){ $( this ).removeClass('active'); });
6. Proxy Drag
Drag a copy of the original box, then the orginal box gets animated to the drop location.
$('#demo6_box') .bind('dragstart',function( event ){ if ( !$(event.target).is('.handle') ) return false; return $( this ).css('opacity',.5) .clone().addClass('active') .insertAfter( this ); }) .bind('drag',function( event ){ $( event.dragProxy ).css({ top: event.offsetY, left: event.offsetX }); }) .bind('dragend',function( event ){ $( event.dragProxy ).remove(); $( this ).animate({ top: event.offsetY, left: event.offsetX, opacity: 1 }) });
