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 & 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