[UPDATED CODE AND HELP CAN BE FOUND HERE]
@REQUIRES
Event-ListenerCode
1
2 <script type="text/javascript">
3 //Requires http://www.jsfromhell.com/geral/event-listener
4
5 //+ Jonas Raoni Soares Silva
6 //@ http://jsfromhell.com/dhtml/drag-library [v1.0]
7
8 DragLibrary = {
9 e: null,
10 diff: { x: 0, y: 0 },
11 lineLength: function( x, y, x0, y0 ){
12 return Math.sqrt( ( x -= x0 ) * x + ( y -= y0 ) * y );
13 },
14 dotLineLength: function( x, y, x0, y0, x1, y1, o ){
15 if( o && !( o = function( x, y, x0, y0, x1, y1 ){
16 if( !( x1 - x0 ) ) return { x: x0, y: y };
17 else if( !( y1 - y0 ) ) return { x: x, y: y0 };
18 var left, tg = -1 / ( ( y1 - y0 ) / ( x1 - x0 ) );
19 return { x: left = ( x1 * ( x * tg - y + y0 ) + x0 * ( x * - tg + y - y1 ) ) / ( tg * ( x1 - x0 ) + y0 - y1 ), y: tg * left - tg * x + y };
20 }( x, y, x0, y0, x1, y1 ), o.x >= Math.min( x0, x1 ) && o.x <= Math.max( x0, x1 ) && o.y >= Math.min( y0, y1 ) && o.y <= Math.max( y0, y1 ) ) ){
21 var l1 = this.lineLength( x, y, x0, y0 ), l2 = this.lineLength( x, y, x1, y1 );
22 return l1 > l2 ? l2 : l1;
23 }
24 else {
25 var a = y0 - y1, b = x1 - x0, c = x0 * y1 - y0 * x1;
26 return Math.abs( a * x + b * y + c ) / Math.sqrt( a * a + b * b );
27 }
28 },
29 beginDrag: function ( e ){
30 var dL = DragLibrary, o = dL.e = e.target;
31 dL.diff = { x: o.offsetLeft - e.clientX, y: o.offsetTop - e.clientY };
32 addEventListener( document, "mousemove", dL.drag );
33 addEventListener( document, "mouseup", dL.endDrag );
34 },
35 drag: function( e ){
36 var dL = DragLibrary, pt = dL.e.dragHandler.call( dL.e.dragHandler.data, e.clientX, e.clientY );
37 dL.e.style.left = ( pt.x += dL.diff.x ) + "px";
38 dL.e.style.top = ( pt.y += dL.diff.y ) + "px";
39 dL.e.ondrag instanceof Function && dL.e.ondrag( e, pt.x, pt.y );
40 },
41 endDrag: function(){
42 removeEventListener( document, "mouseup", DragLibrary.endDrag );
43 removeEventListener( document, "mousemove", DragLibrary.drag );
44 },
45 setHandler: function( e, data, handler ){
46 ( e.dragHandler = handler ).data = data;
47 e.style.position = "absolute";
48 addEventListener( e, "mousedown", this.beginDrag );
49 },
50 freeDrag: function( e ){
51 this.setHandler( e, null, function( x, y ){
52 return { x: x, y: y };
53 } );
54 },
55 squareDrag: function( e, x, y, width, height ){
56 this.setHandler( e, { x: x, y: y, w: width, h: height }, function( x, y ){
57 var o = this;
58 return { x: x < o.x ? o.x : x > o.x + o.w ? o.x + o.w : x, y: y < o.y ? o.y : y > o.y + o.h ? o.y + o.h : y };
59 });
60 },
61 circleDrag: function( e, x, y, ray ){
62 this.setHandler( e, { x: x + ray, y: y + ray, ray: ray }, function( x, y ){
63 var o = this, tg;
64 return DragLibrary.lineLength( x, y, o.x, o.y ) > o.ray ?
65 { x: Math.cos( tg = Math.atan2( y - o.y, x - o.x ) ) * o.ray + o.x, y: Math.sin( tg ) * o.ray + o.y }
66 : { x: x, y: y };
67 } );
68 },
69 freeLineDrag: function( e, x, y, angle ){
70 this.setHandler( e, { x: x, y: y, angle: angle }, function( x, y ){
71 var o = this, tg = ( ( o.angle %= 360 ) < 0 && ( o.angle += 180 ), Math.tan( -o.angle * Math.PI / 180 ) );
72 return o.angle < 45 || o.angle > 135 ? { x: x, y: ( x - o.x ) * tg + o.y } : { x: ( y - o.y ) / tg + o.x, y: y };
73 } );
74 },
75 polylineDrag: function( e, x0, y0, x1, y1, etc, etc, etc ){
76 for( var args = [].slice.call( arguments, 0 ), lines = []; args.length > 4; lines[lines.length] = { y1: args.pop(), x1: args.pop(), y0: args.pop(), x0: args.pop() } );
77 this.setHandler( e, lines, function( x, y ){
78 if( !this.length )
79 return { x: x, y: y };
80 var l, dL = DragLibrary, o = this[0], lower = { i: 0, l: dL.dotLineLength( x, y, o.x0, o.y0, o.x1, o.y1, 1 ) };
81 for( var i in this )
82 lower.l > ( l = dL.dotLineLength( x, y, ( o = this[i] ).x0, o.y0, o.x1, o.y1, 1 ) ) && ( lower = { i: i, l: l } );
83 y = y < Math.min( ( o = this[lower.i] ).y0, o.y1 ) ? Math.min( o.y0, o.y1 ) : y > Math.max( o.y0, o.y1 ) ? Math.max( o.y0, o.y1 ) : y;
84 x = x < Math.min( o.x0, o.x1 ) ? Math.min( o.x0, o.x1 ) : x > Math.max( o.x0, o.x1 ) ? Math.max( o.x0, o.x1 ) : x;
85 return Math.abs( o.x0 - o.x1 ) < Math.abs( o.y0 - o.y1 ) ? { x: ( y * ( o.x0 - o.x1 ) - o.x0 * o.y1 + o.y0 * o.x1 ) / ( o.y0 - o.y1 ), y: y }
86 : { x: x, y: ( x * ( o.y0 - o.y1 ) - o.y0 * o.x1 + o.x0 * o.y1 ) / ( o.x0 - o.x1 ) };
87 } );
88 }
89 };
Example
1
2 <style type="text/css">
3 .box{
4 position: absolute;
5 border: 1px solid
6 width: 50px;
7 height: 50px;
8 font: 12px monospace;
9 font-weight: bold;
10 }
11
12
13
14
15
16 </style>
17
18
19 <script type="text/javascript">
20 //<![CDATA[
21
22 function newBox( id ){
23 var r = document.body.appendChild( document.createElement( "div" ) ).appendChild( document.createTextNode( "kind: " + id ) ).parentNode;
24 return ( r.setAttribute( "id", id ), r.setAttribute( "class", "box" ), r.className = "box", r );
25 }
26
27 DragLibrary.freeDrag( newBox( "free" ) );
28 DragLibrary.polylineDrag( newBox( "polyLine" ), 0, 0, 200, 200, 200, 200, 400, 200, 400, 200, 600, 0 );
29 DragLibrary.freeLineDrag( newBox( "freeLine" ), 200, 400, 60 );
30 DragLibrary.squareDrag( newBox( "square" ), 200, 200, 400, 200 );
31 DragLibrary.circleDrag( newBox( "circle" ), 100, 100, 100 );
32
33 //]]>
34 </script>
