These projects are retired. The development has stopped and we don't provide support for them anymore.

Drag & drop

TODO

Source and example output

Example 3-3. Drag & drop example

<HTML>
<HEAD>
<TITLE>RelativeLayers : Drag & drop example</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_error.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_browser.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_dragdrop.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>

Remarks

TODO