Relative Layers : Drag & drop example : Draggable Layer « Ajax Layer « JavaScript DHTML






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.com/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>

           
       








relativelayers-0.9.7.zip( 74 k)

Related examples in the same category

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