jquery.event.drag - Demos

## Demos / jquery.event.drag-1.2.js / threedubmedia.com

Click on each heading to toggle sections open and closed.

# 1. Basic Drag

#demo1_box

« 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

#demo2_box

« 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

#demo3_box

« 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

.handle
#demo4_box

« 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

.handle
#demo5_box

« 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

.handle
#demo6_box

« 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
})
});`

# 7. Circular Drag

#demo7_box

« 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();
});`