Display Drag Icon in drag and drop : Drag Drop « GUI Components « JavaScript DHTML






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>

           
       








dynapi.zip( 791 k)

Related examples in the same category

1.DynAPI Examples - Drag Drop /w Collision Detection
2.Drag Over Event: Drag and Drop the file over recycle bins
3.Yahoo! UI Library - Drag and Drop 1
4.Yahoo! UI Library - Drag and Drop 2
5.Yahoo! UI Library - Drag and Drop 3
6.Yahoo! UI Library - Drag and Drop 5
7.Dragged object is on top
8.Drag and Drop - DDProxy
9.Yahoo! UI Library - Drag and Drop: Resize
10.Drag and Drop: Multiple groups, targetable affordance
11.Drag and Drop to sort slides
12.Drag and Drop to sort lists
13.Drag inside and outside a range
14.Drag still
15.Crop an image
16.Drag and drop custom window with title bar
17.Dragable float window with scrollable text inside
18.Dragable transparent window
19.Drag within a range 2
20.Dragable sorted list
21.Dragable and sortable toolbar