JavaScript DHTML/Ajax Layer/Draggable Layer

Содержание

1 Drag and Snap (SnapX)
2 Draggable Layers
3 Dragging Forms and Layers: form controls on a layer
4 Dragging Large Child Layers
5 Inline layer drag and drop
6 Layer drag event
7 Relative Layers : Drag & drop example

Drag and Snap (SnapX)

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Dynapi Examples - Drag & Snap (SnapX)</title> <meta http-equiv=content-type content="text/html; charset=iso-8859-1"> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="JavaScript">

   dynapi.library.setPath("./dynapisrc/");
   dynapi.library.include("dynapi.api");
   dynapi.library.include("dynapi.api.ext.DragEvent");
   dynapi.library.include("dynapi.fx.SnapX");
   dynapi.library.include("dynapi.functions.Color");

</script> <script language="JavaScript">

   var l1,l2,l3,l4,l5,l6,l7,l8,l9,l1txt,l2txt,l3txt,l4txt,l5txt,l6txt,l7txt,l8txt,l9txt;
   l1txt = "drag
snap
inner, 5";
   l2txt = "drag
snap
outer, 5";
   l3txt = "drag
snap
both, 5";
   l4txt = "drag
snap
both, 10
sticky";
   l5txt = "drag
snap
both, 10
grid, def";
   l6txt = "static
snap
def, 15";
   l7txt = "static
snap
def, 10
sticky";
   l8txt = "drag
snap
def, def
grid, def";
   //l9txt = "drag
snap
def, def";
   l1 = new DynLayer(l1txt,25,25,50,50,"red");
   l2 = new DynLayer(l2txt,185,25,50,50,"orange");
   l3 = new DynLayer(l3txt,350,25,50,50,"yellow");
   l4 = new DynLayer(l4txt,515,25,50,50,"lightgreen");
   l5 = new DynLayer(l5txt,675,25,50,50,"lightblue");
   l6 = new DynLayer(l6txt,25,100,100,100,"violet");
   l7 = new DynLayer(l7txt,225,100,100,100,"tan");
   l8 = new DynLayer(l8txt,425,100,175,175,"lightgrey");
   //l9 = new DynLayer(l9txt,625,100,100,100,"gray");
   l1.setTextSelectable(false);
   l2.setTextSelectable(false);
   l3.setTextSelectable(false);
   l4.setTextSelectable(false);
   l5.setTextSelectable(false);
   l6.setTextSelectable(false);
   l7.setTextSelectable(false);
   l8.setTextSelectable(false);
   //l9.setTextSelectable(false);
   l1.enableSnap();
   l2.enableSnap();
   l3.enableSnap();
   l4.enableSnap();
   l4.enableStickySnap();
   l5.enableSnap();
   l5.enableGridSnap();
   l6.enableSnap();
   l7.enableSnap();
   l7.enableStickySnap();
   l8.enableSnap();
   l8.enableGridSnap();
   //l9.enableSnap();
   l1.setSnapBoundary("inner",5);
   l2.setSnapBoundary("outer",5);
   l3.setSnapBoundary("both",5);
   l4.setSnapBoundary("both",10);
   l5.setSnapBoundary("both",10);
   l6.setSnapBoundary(15);
   l7.setSnapBoundary(10);
   l8.setSnapBoundary(15,40);
   l1.setZIndex(100);
   l2.setZIndex(101);
   l3.setZIndex(102);
   l4.setZIndex(103);
   l5.setZIndex(104);
   l6.setZIndex(10);
   l7.setZIndex(11);
   l8.setZIndex(12);
   //l9.setZIndex(13);
   DragEvent.enableDragEvents(l1);
   DragEvent.enableDragEvents(l2);
   DragEvent.enableDragEvents(l3);
   DragEvent.enableDragEvents(l4);
   DragEvent.enableDragEvents(l5);
   l1.addEventListener({
       onsnap : function(e) {
           var src = e.getSource();
       }
   });
   l2.addEventListener({
       onsnap : function(e) {
           var src = e.getSource();
       }
   });
   l3.addEventListener({
       onsnap : function(e) {
           var src = e.getSource();
       }
   });
   l4.addEventListener({
       onsnap : function(e) {
           var src = e.getSource();
       }
   });
   l5.addEventListener({
       onsnap : function(e) {
           var src = e.getSource();
       }
   });
   dynapi.document.addChild(l1);
   dynapi.document.addChild(l2);
   dynapi.document.addChild(l3);
   dynapi.document.addChild(l4);
   dynapi.document.addChild(l5);
   dynapi.document.addChild(l6);
   dynapi.document.addChild(l7);
   dynapi.document.addChild(l8);
   //dynapi.document.addChild(l9);

</script> </head> <body>

Drag & Snap the layers above.

API notes:

Public Methods (Snap):

[null] enableSnap() & disableSnap()
[null] setSnapBoundaryTypeDefault([inner|outer|both]) & [inner|outer|both] getSnapBoundaryTypeDefault()
[null] setSnapBoundaryType([inner|outer|both]) & [snapType] getSnapBoundaryType()
[null] setSnapBoundaryDefault(b) & [b] getSnapBoundaryDefault()
[null] setSnapBoundary() or setSnapBoundary(b) or
[null] setSnapBoundary([inner|outer|both],b) or
[null] setSnapBoundary(number,number) or
[null] setSnapBoundary([inner|outer|both],t,r,b,l) or
[null] setSnapBoundary(ti,ri,bi,li,to,ro,bo,lo)
[Array (t,r,b,l)] getSnapBoundary([inner|outer]) or
[Array (ti,ri,bi,li,to,ro,bo,lo)] getSnapBoundary(both)
[null] enableStickySnap() & disableStickySnap()
[null] enableGridSnap() & disableGridSnap()
[null] setGridSnapSize(b)

BUGS list:

Dragging a grid snap layer over a sticky snap layer acts like grid snap when it should not.
Double check & clean up inner & outer corner grid snapping code.
Add sticky snap support for both sides of the target layer"s border (currently inner or outer only).
Add sticky snap support for upper-right and lower-left corners (i.e. reflective w.r.t. real edge).
Find a way to make the snapping/resnapping less jittery (i.e. sticky & grid are options).

TODO list:

Add argument passing to enableSnap() for more compact way to specify snap type [normal|sticky|grid], boundary type [inner|outer|both], grid size (if applicable) and boundary sizes.
Add a dockable feature.
Add a "ghost" feature.

</body> </html>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Draggable Layers

<A href="http://www.wbex.ru/Code/JavaScriptDownload/MochiKit-1.3.1.zip">MochiKit-1.3.1.zip( 302 k)</a>

1. <A href="/Code/JavaScript/Ajax-Layer/DragandSnapSnapX.htm">Drag and Snap (SnapX)</a> <A href="/Code/JavaScript/Ajax-Layer/DragandSnapSnapX.htm"></a> 2. <A href="/Code/JavaScript/Ajax-Layer/Layerdragevent.htm">Layer drag event</a> <A href="/Code/JavaScript/Ajax-Layer/Layerdragevent.htm"></a> 3. <A href="/Code/JavaScript/Ajax-Layer/DraggingLargeChildLayers.htm">Dragging Large Child Layers</a> <A href="/Code/JavaScript/Ajax-Layer/DraggingLargeChildLayers.htm"></a> 4. <A href="/Code/JavaScript/Ajax-Layer/DraggingFormsandLayersformcontrolsonalayer.htm">Dragging Forms and Layers: form controls on a layer</a> <A href="/Code/JavaScript/Ajax-Layer/DraggingFormsandLayersformcontrolsonalayer.htm"></a> 5. <A href="/Code/JavaScript/Ajax-Layer/RelativeLayersDragdropexample.htm">Relative Layers : Drag & drop example</a> <A href="/Code/JavaScript/Ajax-Layer/RelativeLayersDragdropexample.htm"></a> 6. <A href="/Code/JavaScript/Ajax-Layer/Inlinelayerdraganddrop.htm">Inline layer drag and drop</a> <A href="/Code/JavaScript/Ajax-Layer/Inlinelayerdraganddrop.htm"></a>

Dragging Forms and Layers: form controls on a layer

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Dragging Forms & Layers</title> <script language="Javascript" type="text/javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript" type="text/javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("DragEvent") //--> </script> <script language="Javascript" type="text/javascript">

 lyr = new DynLayer(null,50,50,250,200,"red");
 lyr.setHTML("drag me <form>"+
       "<input type="radio" value="1" name="r1" checked>"+
       "<input type="radio" value="1" name="r1">"+
       "<input type="checkbox" value="1">
"+
       "<input type="text" value="text">"+
       "<input type="button" value="submit">"+
       "<input type="image" name="myimage" src="./dynapisrc/ext/images/debug_imgreload.gif">"+
       "<textarea name="ta" cols=20 rows=3>textarea textarea textarea textarea textarea textarea textarea</textarea>"+
       "
<img src="./dynapiexamples/images/arrowdown.gif" width=50 height=50></form>");
 dynapi.document.addChild(lyr);
 DragEvent.enableDragEvents(lyr);
 DragEvent.setDragBoundary(lyr);

</script> </head> <body bgcolor="#ffffff"> Issue: Unable to scroll or select text in some browsers (e.g. IE) when drag events are enabled on the layer Try scrolling or selecting text within the text boxes </body> </html>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Dragging Large Child Layers

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>Dragging Large Child Layers</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("DragEvent"); </script> <script language="Javascript"> var container = new DynLayer(null,0,0,200,200,"e0e0e0"); var insideObj = new DynLayer("Can drag until x & y=0. This due to boundrary {left:0, right:0, top:0, bottom:0} and this layer being larger than it"s parent",100,100,400,400, "lime"); // larger than our container... container.addChild(insideObj); DragEvent.setDragBoundary(insideObj, {left:0, right:0, top:0, bottom:0}); DragEvent.enableDragEvents(insideObj); dynapi.document.addChild(container); var container = new DynLayer(null,250,0,200,200,"e0e0e0"); var insideObj = new DynLayer("Can"t drag due to boundrary {left:0, right:0, top:0, bottom:0} and this layer being larger than it"s parent",0,0,400,400, "yellow"); // larger than our container... container.addChild(insideObj); DragEvent.setDragBoundary(insideObj, {left:0, right:0, top:0, bottom:0}); DragEvent.enableDragEvents(insideObj); dynapi.document.addChild(container); </script> </head> <body> <script>

 dynapi.document.insertAllChildren();

</script> </body> </html>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Inline layer drag and drop

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - Inline Widget</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.library"); dynapi.library.include("dynapi.debug"); dynapi.library.include("dynapi.api"); dynapi.library.include("DynLayerInline"); dynapi.library.include("DragEvent"); </script> <script language="Javascript"> var mylayer = dynapi.document.addChild(new DynLayer(),null,"mylayer"); mylayer.addChild(new DynLayer(),"lyrBox1","box1"); mylayer.addChild(new DynLayer(),"lyrBox2","box2"); mylayer.addChild(new DynLayer(),"lyrBox3","box3"); mylayer.addChild(new DynLayer(),"lyrBox4","box4"); DragEvent.enableDragEvents(

 mylayer,
 mylayer.lyrBox1,
 mylayer.lyrBox2,
 mylayer.lyrBox3,
 mylayer.lyrBox4

); var el = {

 onmousedown : function(e) {
   dynapi.debug.print("mousedown on "+e.getSource().id)
   e.preventBubble();
 }

} mylayer.addEventListener(el); </script> <style type="text/css">

</style> </head> <body bgcolor="#FFFFFF">

My Inline Widget
Drag Me

</body> </html>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Layer drag event

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - Drag Event</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("dynapi.library"); dynapi.library.include("dynapi.debug"); dynapi.library.include("DragEvent"); </script> <script language="Javascript"> var p = dynapi.document.addChild(new DynLayer(null,50,50,200,200,"silver")) var a=p.addChild(new DynLayer(null,10,10,20,20,"red")) DragEvent.enableDragEvents(a); DragEvent.setDragBoundary(a, {left:5, right:5, top:5, bottom:5}); dynapi.onLoad(function() {

 str = "// Try these tests:\n\n"+
 "p.setSize(150,350);\n"+
 "//p.setSize(200,200);\n";
 dynapi.debug.setEvaluate(str);

}); </script> </head> <body bgcolor="#999999"> <script> dynapi.document.insertAllChildren(); </script> </body> </html>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Relative Layers : Drag & drop example

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML> <HEAD> <TITLE>RelativeLayers : Drag & drop example</TITLE> <SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="rl_browser_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_dragdrop_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT> </HEAD> <BODY BGCOLOR="#2F4078">

  Layer 1.

  Demo of drag and drop.

  Layer 2.

 <A HREF="javascript:layer2.visibleResizeBy("-10%",0)">Narrower</A>
 <A HREF="javascript:layer2.visibleResizeBy("10%",0)">Wider</A>
 <A HREF="javascript:layer2.visibleResizeBy(0,"-10%")">Shorter</A>
 <A HREF="javascript:layer2.visibleResizeBy(0,"10%")">Longer</A>

    Layer 3.

    Demo of drag and drop.

</BODY> </HTML>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/relativelayers-0.9.7.zip">relativelayers-0.9.7.zip( 74 k)</a>

JavaScript DHTML/Ajax Layer/Draggable Layer

Содержание

Drag and Snap (SnapX)

Draggable Layers

Dragging Forms and Layers: form controls on a layer

Dragging Large Child Layers

Inline layer drag and drop

Layer drag event

Relative Layers : Drag & drop example

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты