Inline layer drag and drop : Draggable Layer : Ajax Layer JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Draggable Layer »

 

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>


           
       

Download : Download nav_dynapi.zip nav_dynapi.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Ajax Layer
» Draggable Layer