JavaScript DHTML/Ajax Layer/Draggable Layer — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 12:58, 26 мая 2010
Содержание
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>