Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

DZone's Guide to

# DragLibrary //Java Script Object

· ·
Free Resource

Comment (0)

Save
{{ articles[0].views | formatCount}} Views
```

[UPDATED CODE AND HELP CAN BE FOUND HERE]

@REQUIRES Event-Listener

Code

```

//Requires http://www.jsfromhell.com/geral/event-listener

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/dhtml/drag-library [v1.0]

DragLibrary = {
e: null,
diff: { x: 0, y: 0 },
lineLength: function( x, y, x0, y0 ){
return Math.sqrt( ( x -= x0 ) * x + ( y -= y0 ) * y );
},
dotLineLength: function( x, y, x0, y0, x1, y1, o ){
if( o && !( o = function( x, y, x0, y0, x1, y1 ){
if( !( x1 - x0 ) ) return { x: x0, y: y };
else if( !( y1 - y0 ) ) return { x: x, y: y0 };
var left, tg = -1 / ( ( y1 - y0 ) / ( x1 - x0 ) );
return { x: left = ( x1 * ( x * tg - y + y0 ) + x0 * ( x * - tg + y - y1 ) ) / ( tg * ( x1 - x0 ) + y0 - y1 ), y: tg * left - tg * x + y };
}( 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 ) ) ){
var l1 = this.lineLength( x, y, x0, y0 ), l2 = this.lineLength( x, y, x1, y1 );
return l1 > l2 ? l2 : l1;
}
else {
var a = y0 - y1, b = x1 - x0, c = x0 * y1 - y0 * x1;
return Math.abs( a * x + b * y + c ) / Math.sqrt( a * a + b * b );
}
},
beginDrag: function ( e ){
var dL = DragLibrary, o = dL.e = e.target;
dL.diff = { x: o.offsetLeft - e.clientX, y: o.offsetTop - e.clientY };
},
drag: function( e ){
var dL = DragLibrary, pt = dL.e.dragHandler.call( dL.e.dragHandler.data, e.clientX, e.clientY );
dL.e.style.left = ( pt.x += dL.diff.x ) + "px";
dL.e.style.top = ( pt.y += dL.diff.y ) + "px";
dL.e.ondrag instanceof Function && dL.e.ondrag( e, pt.x, pt.y );
},
endDrag: function(){
removeEventListener( document, "mouseup", DragLibrary.endDrag );
removeEventListener( document, "mousemove", DragLibrary.drag );
},
setHandler: function( e, data, handler ){
( e.dragHandler = handler ).data = data;
e.style.position = "absolute";
},
freeDrag: function( e ){
this.setHandler( e, null, function( x, y ){
return { x: x, y: y };
} );
},
squareDrag: function( e, x, y, width, height ){
this.setHandler( e, { x: x, y: y, w: width, h: height }, function( x, y ){
var o = this;
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 };
});
},
circleDrag: function( e, x, y, ray ){
this.setHandler( e, { x: x + ray, y: y + ray, ray: ray }, function( x, y ){
var o = this, tg;
return DragLibrary.lineLength( x, y, o.x, o.y ) > o.ray ?
{ x: Math.cos( tg = Math.atan2( y - o.y, x - o.x ) ) * o.ray + o.x, y: Math.sin( tg ) * o.ray + o.y }
: { x: x, y: y };
} );
},
freeLineDrag: function( e, x, y, angle ){
this.setHandler( e, { x: x, y: y, angle: angle }, function( x, y ){
var o = this, tg = ( ( o.angle %= 360 ) < 0 && ( o.angle += 180 ), Math.tan( -o.angle * Math.PI / 180 ) );
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 };
} );
},
polylineDrag: function( e, x0, y0, x1, y1, etc, etc, etc ){
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() } );
this.setHandler( e, lines, function( x, y ){
if( !this.length )
return { x: x, y: y };
var l, dL = DragLibrary, o = this[0], lower = { i: 0, l: dL.dotLineLength( x, y, o.x0, o.y0, o.x1, o.y1, 1 ) };
for( var i in this )
lower.l > ( l = dL.dotLineLength( x, y, ( o = this[i] ).x0, o.y0, o.x1, o.y1, 1 ) ) && ( lower = { i: i, l: l } );
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;
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;
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 }
: { x: x, y: ( x * ( o.y0 - o.y1 ) - o.y0 * o.x1 + o.x0 * o.y1 ) / ( o.x0 - o.x1 ) };
} );
}
};
</code>

Example

<code>
<style type="text/css">
.box{
position: absolute;
border: 1px solid #000;
width: 50px;
height: 50px;
font: 12px monospace;
font-weight: bold;
}
#circle{ background-color: #fee; }
#square{ background-color: #ccc; left: 50px; }
#freeLine{ background-color: #eff; left: 100px; }
#polyLine{ background-color: #efe; left: 150px; }
#free{ background-color: #eef; left: 200px; }
</style>

<script type="text/javascript">
//<![CDATA[

function newBox( id ){
var r = document.body.appendChild( document.createElement( "div" ) ).appendChild( document.createTextNode( "kind: " + id ) ).parentNode;
return ( r.setAttribute( "id", id ), r.setAttribute( "class", "box" ),	r.className = "box", r );
}

DragLibrary.freeDrag( newBox( "free" ) );
DragLibrary.polylineDrag( newBox( "polyLine" ), 0, 0, 200, 200, 200, 200, 400, 200, 400, 200, 600, 0 );
DragLibrary.freeLineDrag( newBox( "freeLine" ), 200, 400, 60 );
DragLibrary.squareDrag( newBox( "square" ), 200, 200, 400, 200 );
DragLibrary.circleDrag( newBox( "circle" ), 100, 100, 100 );

//]]>

``````
Topics:

Comment (0)

Save
{{ articles[0].views | formatCount}} Views

Opinions expressed by DZone contributors are their own.