k2ll33d

K2LL33D SHELL

Apache/2.4.7 (Ubuntu)
Linux sman1baleendah 3.13.0-24-generic #46-Ubuntu SMP Thu Apr 10 19:11:08 UTC 2014 x86_64
uid=33(www-data) gid=33(www-data) groups=33(www-data)
safemode : OFF
MySQL: ON | Perl: ON | cURL: OFF | WGet: ON
> / usr / share / doc / libjs-jquery-event-drag / demo /

server ip : 104.21.89.46

your ip : 108.162.216.216

H O M E

Filename	/usr/share/doc/libjs-jquery-event-drag/demo/index.htm
Size	37.33 kb
Permission	rw-r--r--
Owner	root : root
Create time	27-Apr-2025 10:12
Last modified	12-Jan-2013 03:21
Last accessed	06-Jul-2025 23:49
Actions	edit \| rename \| delete \| download (gzip)
View	text \| code \| image

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery.event.drag - Demos</title>
<style type="text/css" media="screen">
body {
font: 12px/16px Verdana, Arial, Helvetica, sans-serif;
color: #002;
padding: 0;
margin: 20px;
}

code {
display: block;
background: #F9F9F9;
border: 1px dashed #ABC;
font: 12px/16px "Courier New", Courier, monospace;
padding: 10px;
margin: 0 0 30px 110px;
}
.str { color: #00A; }
.kwd { color: #808; }
.com { color: #777; }
.typ { color: #088; }
.lit { color: #800; }
.pun { color: #000; }
.pln { color: #002; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
p {
margin: 0 0 5px 110px;
}
.box {
position: absolute;
height: 98px;
width: 98px;
background: #CCF;
border: 1px solid #AAD;
text-align: center;
font-size: 10px;
}
.handle {
cursor: move;
}
.bar {
background: #AAD;
}
.active {
background-color: #CFC;
border-color: #ADA;
}
.active .bar {
background-color: #ADA;
}
.point {
position: absolute;
height: 4px;
width: 4px;
margin: -2px 0 0 -2px;
background: #A00;
}
.section {
display: none;
}
h1 {
border-bottom: 1px solid #CCC;
text-indent: 110px;
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js" type="text/javascript"></script>
<script src="../jquery.event.drag-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// TOGGLE SECTIONS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('h1').bind('click',function(){
$( this ).next('.section')
.slideToggle();
}).eq(0).trigger('click');
// DEMO ONE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#demo1_box').bind('drag',function( event ){
$( this ).css({
top: event.offsetY,
left: event.offsetX
});
});
// DEMO TWO ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#demo2_box')
.bind('drag',function( event ){
$( this ).css( event.shiftKey ? {
top: event.offsetY } : {
left: event.offsetX
});
});
// DEMO THREE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#demo3_box')
.bind('drag',function( event ){
$( this ).css({
top: Math.round( event.offsetY/20 ) * 20,
left: Math.round( event.offsetX/20 ) * 20
});
});
// DEMO FOUR ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#demo4_box')
.bind('dragstart',function( event ){
return $(event.target).is('.handle');
})
.bind('drag',function( event ){
$( this ).css({
top: event.offsetY,
left: event.offsetX
});
});
// DEMO FIVE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#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');
});
// DEMO SIX ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#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
})
});
// DEMO SEVEN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#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();
});
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}); // doc.ready
</script>
</head>
<body>
<h2>Demos / jquery.event.drag-1.2.js / <a href="http://threedubmedia.com/">threedubmedia.com</a></h2>
Click on each heading to toggle sections open and closed.

<h1>1. Basic Drag</h1>
<div class="section">
<div id="demo1_box" class="box handle">
#demo1_box
<input type="text" size="10" value="No drag..." />
<input type="button" value="No drag..." />
</div>
« Drag the blue box around the page, by default you cannot begin dragging within ":input" elements.
<code>
$('#demo1_box')         .bind('drag',function( event ){                 $( this ).css({                         top: event.offsetY,                         left: event.offsetX                         });                 });
</code>
</div>

<h1>2. Axis Drag</h1>
<div class="section">
<div id="demo2_box" class="box handle">#demo2_box</div>
« Drag the blue box along the x-axis. Hold "shift" to drag along the y-axis.
<code>$('#demo2_box')         .bind('drag',function( event ){                 $( this ).css( event.shiftKey ? {                         top: event.offsetY } : {                         left: event.offsetX                         });                 });
</code>
</div>

<h1>3. Grid Drag</h1>
<div class="section">
<div id="demo3_box" class="box handle">#demo3_box</div>
« Drag the blue box around the page, notice it snaps to a 20 pixel grid.
<code>$('#demo3_box')         .bind('drag',function( event ){                 $( this ).css({                         top: Math.round( event.offsetY/20 ) * 20,                         left: Math.round( event.offsetX/20 ) * 20                         });                 });
</code>
</div>

<h1>4. Handle Drag</h1>
<div class="section">
<div id="demo4_box" class="box">
<div class="handle bar">.handle</div>
#demo4_box
</div>
« Drag the blue box around the page using the "handle" only.
<code>
$('#demo4_box')         .bind('dragstart',function( event ){                 return $(event.target).is('.handle');                 })         .bind('drag',function( event ){                 $( this ).css({                         top: event.offsetY,                         left: event.offsetX                         });                 });
</code>
</div>

<h1>5. Active Drag</h1>
<div class="section">
<div id="demo5_box" class="box">
<div class="handle bar">.handle</div>
#demo5_box
</div>
« The box turns green while dragging around the page.
<code>
$('#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');                 });
</code>
</div>

<h1>6. Proxy Drag</h1>
<div class="section">
<div id="demo6_box" class="box">
<div class="handle bar">.handle</div>
#demo6_box
</div>
« Drag a copy of the original box, then the orginal box gets animated to the drop location.
<code>
$('#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                         })                 });
</code>
</div>

<h1>7. Circular Drag</h1>
<div class="section">
<div id="demo7_box" class="box handle">#demo7_box</div>
« Drag the blue box around the page, it follows the fixed path of a circle.
<code>
$('#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();                 });
</code>
</div>
</body>
</html>