Web Hosting by Netfirms | Free Domain Names by Netfirms

XDRAG JAVASCRIPT OBJECT

This static object simplifies the dragging process. Simplify put before it would take many lines of code to make an html element dragable now with this object it only takes 1. This object also performs multiple drag!

Try and drag a layer (on the right) and notice that it is placed above all other layers and will follow the mouse until the mouse up event is called. Press the control key and click a layer, while holding the control key and select more layers. Now drag the current layer and notice that all other layers are dragged with it, that's right, that's how a multiple drag is performed.

Try and drag a layer out of the screen and notice that the layer cannot be dragged outside the drag area.

While dragging a border is placed around layers.

The object is fully customizable, the following attributes can be set:

Events to capture: onDragStart,onDragEnd ,onmousedown,onmouseup ,onmousemove
Drag Area: Use xDrag.setDragArea(Top,Right,Bottom,Left).
Width and height of button (Image is streched to given dimensions)

xDrag is static and should not be instantized with new but instead used by name i.e XDrag.

Code!
<script language="javascript" src="xLayer.js"></script> <script language="javascript" src="xMouseEvents.js"></script> <script language="javascript" src="xDrag.js"></script> <script language="javascript"> function init() { // create an array of layers arrLay = new Array( new xLayer(100,70,10,10,true,"red") ,new xLayer(100,70,10,10,true,"green") ,new xLayer(100,70,10,10,true,"pink") ,new xLayer(100,70,10,10,true,"silver") ); // add all layers to the drag object var lTop = 50; var lGap = 25 var lRightSideGap = 50; for(i=0; i < arrLay.length; i++) { xDrag.add(arrLay[i]); // slide layers to right of screen with a margin // and stack them on top of each other // with a gap between them arrLay[i].slideTo(S.w - arrLay[i].w - lRightSideGap, lTop); // next position for next layer lTop += arrLay[i].h + lGap } // set the drag area. xDrag.setDragArea(0,S.w/2,S.h,0); } </script>

You may use this javascript for free!

Home