Click on each heading to toggle sections open and closed.
« 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
                        });
                });
« 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
                        });
                });
« 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
                        });
                });
« 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
                        });
                });
« 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');
                });
« 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
                        })
                });
« Drag the blue box around the page, it follows the fixed path of a circle.
$('#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();
                });