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)

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 = "<font size="1" face="Verdana">drag<br />snap<br />inner, 5</font>";
    l2txt = "<font size="1" face="Verdana">drag<br />snap<br />outer, 5</font>";
    l3txt = "<font size="1" face="Verdana">drag<br />snap<br />both, 5</font>";
    l4txt = "<font size="1" face="Verdana">drag<br />snap<br />both, 10<br />sticky</font>";
    l5txt = "<font size="1" face="Verdana">drag<br />snap<br />both, 10<br />grid, def</font>";
    l6txt = "<font size="1" face="Verdana">static<br />snap<br />def, 15</font>";
    l7txt = "<font size="1" face="Verdana">static<br />snap<br />def, 10<br />sticky</font>";
    l8txt = "<font size="1" face="Verdana">drag<br />snap<br />def, def<br />grid, def</font>";
    //l9txt = "<font size="1" face="Verdana">drag<br />snap<br />def, def</font>";
    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>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<font face="Verdana, Arial" size="2">Drag &amp; Snap the layers above.<br />
<br />
<b>API notes:</b><br />
<br />
Public Methods (Snap):
<ul>
  <li>[null] enableSnap() &amp; disableSnap()</li>
  <li>[null] setSnapBoundaryTypeDefault([inner|outer|both]) &amp; [inner|outer|both] getSnapBoundaryTypeDefault()</li>
  <li>[null] setSnapBoundaryType([inner|outer|both]) &amp; [snapType] getSnapBoundaryType()</li>
  <li>[null] setSnapBoundaryDefault(b) &amp; [b] getSnapBoundaryDefault()</li>
  <li>[null] setSnapBoundary() or setSnapBoundary(b) or<br />
      [null] setSnapBoundary([inner|outer|both],b) or<br />
      [null] setSnapBoundary(number,number) or<br />
      [null] setSnapBoundary([inner|outer|both],t,r,b,l) or<br />
      [null] setSnapBoundary(ti,ri,bi,li,to,ro,bo,lo)</li>
  <li>[Array (t,r,b,l)] getSnapBoundary([inner|outer]) or<br/>
      [Array (ti,ri,bi,li,to,ro,bo,lo)] getSnapBoundary(both)</li>
  <li>[null] enableStickySnap() &amp; disableStickySnap()</li>
  <li>[null] enableGridSnap() &amp; disableGridSnap()</li>
  <li>[null] setGridSnapSize(b)</li>
</ul>
BUGS list:
<ul>
  <li>Dragging a grid snap layer over a sticky snap layer acts like grid snap when it should not.</li>
  <li>Double check &amp; clean up inner &amp; outer corner grid snapping code.</li>
  <li>Add sticky snap support for both sides of the target layer"s border (currently inner or outer only).</li>
  <li>Add sticky snap support for upper-right and lower-left corners (i.e. reflective w.r.t. real edge).</li>
  <li>Find a way to make the snapping/resnapping less jittery (i.e. sticky & grid are options).</li>
</ul>
TODO list:
<ul>
  <li>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.</li>
  <li>Add a dockable feature.</li>
  <li>Add a "ghost" feature.</li>
</ul>
</font>
</body>
</html>

<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

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"><br>"+
        "<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>"+
        "<br><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>

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

Dragging Large Child Layers

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>

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

Inline layer drag and drop

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">
<!--
#mylayer {position:absolute; left:250px; top:50px; width:200px; height:200px; clip:rect(0px 200px 200px 0px); background-color:red; layer-background-color:red;}
#box1 {position:absolute; left:0px; top:0px; width:20px; height:20px; clip:rect(0px 20px 20px 0px); background-color:yellow; z-index:5; layer-background-color:yellow;}
#box2 {position:absolute; left:180px; top:0px; width:20px; height:20px; clip:rect(0px 20px 20px 0px); background-color:blue; z-index:5; layer-background-color:blue;}
#box3 {position:absolute; left:180px; top:180px; width:20px; height:20px; clip:rect(0px 20px 20px 0px); background-color:silver; z-index:5; layer-background-color:silver;}
#box4 {position:absolute; left:0px; top:180px; width:20px; height:20px; clip:rect(0px 20px 20px 0px); background-color:green; z-index:5; layer-background-color:green;}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<div id="mylayer">
<table border="0" height="200" width="200"><tr><td align="center"><font color="#ffffff">My Inline Widget<br>Drag Me</font></td></tr></table>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>
</body>
</html>

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

Layer drag event

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>

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

Relative Layers : Drag & drop example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
// RelativeLayers 0.9.7
// 
// $Id: example8.html 1.7 04/02/02 21:22:32+01:00 gbevin@willow.uwyn.office $
// 
// Library for creating dynamic designs that adapt themselves to the user"s
// browser environment.
// 
// Copyright (C) 1998-2004, Geert Bevin
// Distributed under the terms of the GNU Lesser General Public, v2.1 or later
// 
// gbevin[remove] at uwyn dot com
// http://www.uwyn.ru/projects/relativelayers
-->
<HTML>
<HEAD>
<TITLE>RelativeLayers : Drag &amp; 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">
<!--
layer1 = new RelativeLayer(
"layer1Div", "", "",
"40%","60%",LEFT,"5%",TOP,"10%","-50%","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd");
layer1.setDraggable(DRAGGABLE);
layer1.setDragLimit(AVAILABLELIMITS);
layer1.setDragAutoRaise(true);
layer1.setVisible(true);
layer1.addEventListener("dragstart", dragStart);
layer1.addEventListener("dragmoved", dragMove);
layer1.addEventListener("dragend", dragEnd);
layer1.addEventListener("dragenter", dragEnter);
layer1.addEventListener("dragleave", dragLeave);
layer1.addEventListener("dragdrop", dragDrop);
  
layer2 = new RelativeLayer(
"layer2Div", "layer1Div", "layer1Div",
"40%","60%",RIGHT,"10%",TOP,"20%","-50%","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#99dd99");
layer2.setDraggable(DRAGGABLE);
layer2.setDragAutoRaise(true);
layer2.setVisible(true);
layer2.addEventListener("dragstart", dragStart);
layer2.addEventListener("dragmoved", dragMove);
layer2.addEventListener("dragend", dragEnd);
layer2.addDropTarget(layer1);
  
layer3 = new RelativeLayer(
"layer3Div", "", "",
"80%","80%",LEFT,"50%",TOP,"50%","0","0",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dd9999");
layer3.setDraggable(VERTDRAGGABLE);
layer3.setDragLimit(AVAILABLELIMITS);
layer3.setVisible(true);
layer3.addEventListener("dragstart", dragStart);
layer3.addEventListener("dragmoved", dragMove);
layer3.addEventListener("dragend", dragEnd);
function dragStart(par_event)
{
    window.status = par_event.target.getId()+" : drag start : layer("+par_event.layerX+","+par_event.layerY+") page("+par_event.pageX+","+par_event.pageY+")";
};
function dragMove(par_event)
{
    window.status = par_event.target.getId()+" : drag move : layer("+par_event.layerX+","+par_event.layerY+") page("+par_event.pageX+","+par_event.pageY+") delta("+par_event.deltaX+","+par_event.deltaY+")";
};
function dragEnd(par_event)
{
    window.status = par_event.target.getId()+" : drag end : layer("+par_event.layerX+","+par_event.layerY+") page("+par_event.pageX+","+par_event.pageY+")";
};
function dragEnter(par_event)
{
    window.status = par_event.target.getId()+" : drag enter : source ""+par_event.source.getId()+"" page("+par_event.pageX+","+par_event.pageY+")";
  par_event.target.lastbgcolor = par_event.target.getBgColor();
  par_event.target.setBgColor("#ffffff");
};
function dragLeave(par_event)
{
    window.status = par_event.target.getId()+" : drag leave : source ""+par_event.source.getId()+"" page("+par_event.pageX+","+par_event.pageY+")";
  par_event.target.setBgColor(par_event.target.lastbgcolor);
  par_event.target.lastbgcolor = null;
};
function dragDrop(par_event)
{
    window.status = par_event.target.getId()+" : drag drop : source ""+par_event.source.getId()+"" page("+par_event.pageX+","+par_event.pageY+")";
  par_event.target.setBgColor(par_event.target.lastbgcolor);
  par_event.target.lastbgcolor = null;
};
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#2F4078">
<DIV ID="layer1Div">
   Layer 1.<BR>
   Demo of drag and drop.<BR>
</DIV>
<DIV ID="layer2Div">
   Layer 2.<BR>
  <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><BR>
   
  <DIV ID="layer3Div">
     Layer 3.<BR>
     Demo of drag and drop.<BR>
  </DIV>
</DIV>
</BODY>
</HTML>

<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

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты