| Server IP : 79.136.114.73 / Your IP : 3.147.69.134 Web Server : Apache/2.4.7 (Ubuntu) PHP/5.5.9-1ubuntu4.29 OpenSSL/1.0.1f System : Linux b8009 3.13.0-170-generic #220-Ubuntu SMP Thu May 9 12:40:49 UTC 2019 x86_64 User : www-data ( 33) PHP Version : 5.5.9-1ubuntu4.29 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /usr/share/doc/libjs-jquery-event-drag/demo/ |
Upload File : |
<!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>
<p>Click on each heading to toggle sections open and closed.</p>
<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>
<p>« Drag the blue box around the page, by default you cannot begin dragging within ":input" elements.</p>
<code>
<span class="pln">$</span><span class="pun">(</span><span class="str">'#demo1_box'</span><span class="pun">)</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br> top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">,</span><span class="pln"><br> left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX<br> </span><span class="pun">});</span><span class="pln"><br> </span><span class="pun">});</span>
</code>
</div>
<h1>2. Axis Drag</h1>
<div class="section">
<div id="demo2_box" class="box handle">#demo2_box</div>
<p>« Drag the blue box along the x-axis. Hold "shift" to drag along the y-axis.</p>
<code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo2_box'</span><span class="pun">)</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">shiftKey </span><span class="pun">?</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br> top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY </span><span class="pun">}</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br> left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX<br> </span><span class="pun">});</span><span class="pln"><br> </span><span class="pun">});</span>
</code>
</div>
<h1>3. Grid Drag</h1>
<div class="section">
<div id="demo3_box" class="box handle">#demo3_box</div>
<p>« Drag the blue box around the page, notice it snaps to a 20 pixel grid.</p>
<code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo3_box'</span><span class="pun">)</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br> top</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">round</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">/</span><span class="lit">20</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">20</span><span class="pun">,</span><span class="pln"><br> left</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">round</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX</span><span class="pun">/</span><span class="lit">20</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">20</span><span class="pln"><br> </span><span class="pun">});</span><span class="pln"><br> </span><span class="pun">});</span>
</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>
<p>« Drag the blue box around the page using the "handle" only.</p>
<code>
<span class="pln">$</span><span class="pun">(</span><span class="str">'#demo4_box'</span><span class="pun">)</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragstart'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> </span><span class="kwd">return</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">target</span><span class="pun">).</span><span class="kwd">is</span><span class="pun">(</span><span class="str">'.handle'</span><span class="pun">);</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br> top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">,</span><span class="pln"><br> left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX<br> </span><span class="pun">});</span><span class="pln"><br> </span><span class="pun">});</span>
</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>
<p>« The box turns green while dragging around the page.</p>
<code>
<span class="pln">$</span><span class="pun">(</span><span class="str">'#demo5_box'</span><span class="pun">)</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragstart'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">target</span><span class="pun">).</span><span class="kwd">is</span><span class="pun">(</span><span class="str">'.handle'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'active'</span><span class="pun">);</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br> top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">,</span><span class="pln"><br> left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX<br> </span><span class="pun">});</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragend'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">'active'</span><span class="pun">);</span><span class="pln"><br> </span><span class="pun">});</span>
</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>
<p>« Drag a copy of the original box, then the orginal box gets animated to the drop location.</p>
<code>
<span class="pln">$</span><span class="pun">(</span><span class="str">'#demo6_box'</span><span class="pun">)</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragstart'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">target</span><span class="pun">).</span><span class="kwd">is</span><span class="pun">(</span><span class="str">'.handle'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br> </span><span class="kwd">return</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">'opacity'</span><span class="pun">,</span><span class="lit">.5</span><span class="pun">)</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">clone</span><span class="pun">().</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'active'</span><span class="pun">)</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">insertAfter</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">dragProxy </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br> top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">,</span><span class="pln"><br> left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX<br> </span><span class="pun">});</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragend'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">dragProxy </span><span class="pun">).</span><span class="pln">remove</span><span class="pun">();</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">animate</span><span class="pun">({</span><span class="pln"><br> top</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY</span><span class="pun">,</span><span class="pln"><br> left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX</span><span class="pun">,</span><span class="pln"><br> opacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">});</span>
</code>
</div>
<h1>7. Circular Drag</h1>
<div class="section">
<div id="demo7_box" class="box handle">#demo7_box</div>
<p>« Drag the blue box around the page, it follows the fixed path of a circle.</p>
<code>
<span class="pln">$</span><span class="pun">(</span><span class="str">'#demo7_box'</span><span class="pun">)</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragstart'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> </span><span class="kwd">var</span><span class="pln"> data </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'dragcircle'</span><span class="pun">);</span><span class="pln"><br> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> data </span><span class="pun">)</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">$circle</span><span class="pun">.</span><span class="pln">show</span><span class="pun">();</span><span class="pln"> <br> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br> data </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> <br> radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200</span><span class="pun">,</span><span class="pln"> $circle</span><span class="pun">:</span><span class="pln"> $</span><span class="pun">([]),</span><span class="pln"><br> halfHeight</span><span class="pun">:</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">outerHeight</span><span class="pun">()/</span><span class="lit">2</span><span class="pun">,</span><span class="pln"><br> halfWidth</span><span class="pun">:</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">outerWidth</span><span class="pun">()/</span><span class="lit">2</span><span class="pln"><br> </span><span class="pun">};</span><span class="pln"><br> data</span><span class="pun">.</span><span class="pln">centerX </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetX </span><span class="pun">+</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">radius </span><span class="pun">+</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">halfWidth</span><span class="pun">,</span><span class="pln"><br> data</span><span class="pun">.</span><span class="pln">centerY </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">offsetY </span><span class="pun">+</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">halfHeight</span><span class="pun">,</span><span class="pln"><br> </span><span class="com">// create divs to highlight the path...</span><span class="pln"><br> $</span><span class="pun">.</span><span class="pln">each</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Array</span><span class="pun">(</span><span class="lit">72</span><span class="pun">),</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> i</span><span class="pun">,</span><span class="pln"> a </span><span class="pun">){</span><span class="pln"><br> angle </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">PI </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> i</span><span class="pun">-</span><span class="lit">36</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="lit">36</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br> data</span><span class="pun">.</span><span class="pln">$circle </span><span class="pun">=</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">$circle</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln"> <br> $</span><span class="pun">(</span><span class="str">'<div class="point" />'</span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br> top</span><span class="pun">:</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerY </span><span class="pun">+</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">cos</span><span class="pun">(</span><span class="pln"> angle </span><span class="pun">)*</span><span class="pln">data</span><span class="pun">.</span><span class="pln">radius</span><span class="pun">,</span><span class="pln"><br> left</span><span class="pun">:</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerX </span><span class="pun">+</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(</span><span class="pln"> angle </span><span class="pun">)*</span><span class="pln">data</span><span class="pun">.</span><span class="pln">radius</span><span class="pun">,</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">);</span><span class="pln"><br> </span><span class="pun">});</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">after</span><span class="pun">(</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">$circle </span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'dragcircle'</span><span class="pun">,</span><span class="pln"> data </span><span class="pun">);</span><span class="pln"><br> </span><span class="pun">}</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'drag'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> </span><span class="kwd">var</span><span class="pln"> data </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'dragcircle'</span><span class="pun">),</span><span class="pln"><br> angle </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">atan2</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">pageX </span><span class="pun">-</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerX</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">pageY </span><span class="pun">-</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerY </span><span class="pun">);</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br> top</span><span class="pun">:</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerY </span><span class="pun">+</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">cos</span><span class="pun">(</span><span class="pln"> angle </span><span class="pun">)*</span><span class="pln">data</span><span class="pun">.</span><span class="pln">radius </span><span class="pun">-</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">halfHeight</span><span class="pun">,</span><span class="pln"><br> left</span><span class="pun">:</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">centerX </span><span class="pun">+</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(</span><span class="pln"> angle </span><span class="pun">)*</span><span class="pln">data</span><span class="pun">.</span><span class="pln">radius </span><span class="pun">-</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">halfWidth<br> </span><span class="pun">});</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'dragend'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'dragcircle'</span><span class="pun">).</span><span class="pln">$circle</span><span class="pun">.</span><span class="pln">hide</span><span class="pun">();</span><span class="pln"><br> </span><span class="pun">});</span>
</code>
</div>
</body>
</html>