Display Drag Icon in drag and drop : Drag Drop : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Drag Drop »

 

Display Drag Icon in drag and drop




<html>
<head>
<title>DynAPI Examples - Drag Icon</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.api');
dynapi.library.include('DragEvent');
</script>
<script language="Javascript">

var icon = new DynLayer('<img src="./dynapiexamples/images/file.gif">',0,0,20,24);
icon.setMaximumSize(20,24);

dynapi.functions.getImage("./dynapiexamples/images/menu_side.gif");
var icon2 = new DynLayer(null,0,0,0,0,null,'./dynapiexamples/images/menu_side.gif');


// layer 1
var lyr = new DynLayer('Yellow Source',50,100,100,100,'yellow');
lyr.setDragIcon(icon);
lyr.setDragEnabled(true,null,true);
dynapi.document.addChild(lyr);
lyr._tag='yellow';

// layer 2
var lyr = new DynLayer('Lime Source',50,210,100,100,'lime');
lyr.setDragIcon(icon);
lyr.setDragEnabled(true,null,true);
dynapi.document.addChild(lyr,'layer2');
lyr._tag='lime';

// target
var lyr = new DynLayer('Target',250,100,300,210,'gold');
dynapi.document.addChild(lyr,'target');
lyr.addEventListener({
  ondrop:function(e,dragIcon){
    o = dragIcon.getDragSource();
    alert("You've dropped the "+o._tag+" layer");
  }
});

function changeIcon(){
  dynapi.document.layer2.setDragIcon(icon2);
}
</script>
</head>

<body>
Drag and Drop the Yellow or Lime colored layers onto the Gold layer <br><br>
<a href="javascript:;" onclick="changeIcon()">Change Lime Source Drag Icon<a>
</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 GUI Components
» Drag Drop