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