Jquery drag events

1. Basic Drag

$('#demo2_box')
        .bind('drag',function( event ){
                $( this ).css( event.shiftKey ? {
                        top: event.offsetY } : {
                        left: event.offsetX
                        });
                });

2. Axis Drag

$('#demo2_box')
        .bind('drag',function( event ){
                $( this ).css( event.shiftKey ? {
                        top: event.offsetY } : {
                        left: event.offsetX
                        });
                }); 

3. Grid Drag

$('#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

$('#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

$('#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

$('#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
                        })
                }); 


7. Circular Drag

$('#demo7_box')
        .bind('dragstart',function( event ){
                var data = $( this ).data('dragcircle');
                if ( data ) data.$circle.show();
                else {
                        data = {
                                radius: 200, $circle: $([]),
                                halfHeight: $( this ).outerHeight()/2,
                                halfWidth: $( this ).outerWidth()/2
                                };
                        data.centerX = event.offsetX + data.radius + data.halfWidth,
                        data.centerY = event.offsetY + data.halfHeight,
                        // create divs to highlight the path...
                        $.each( new Array(72), function( i, a ){
                                angle = Math.PI * ( ( i-36 ) / 36 );
                                data.$circle = data.$circle.add(
                                        $('<div class="point" />').css({
                                                top: data.centerY + Math.cos( angle )*data.radius,
                                                left: data.centerX + Math.sin( angle )*data.radius,
                                                })
                                        );
                                });
                        $( this ).after( data.$circle ).data('dragcircle', data );
                        }
                })
        .bind('drag',function( event ){
                var data = $( this ).data('dragcircle'),
                angle = Math.atan2( event.pageX - data.centerX, event.pageY - data.centerY );
                $( this ).css({
                        top: data.centerY + Math.cos( angle )*data.radius - data.halfHeight,
                        left: data.centerX + Math.sin( angle )*data.radius - data.halfWidth
                        });
                })
        .bind('dragend',function(){
                $( this ).data('dragcircle').$circle.hide();
                }); 



http://threedubmedia.com/demo/drag/