使用jquery实现的几种拖动效果

来自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
		})
	});