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