Drag Over Event: Drag and Drop the file over recycle bins : Drag Drop « GUI Components « JavaScript DHTML






Drag Over Event: Drag and Drop the file over recycle bins

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

  dynapi.library.include('dynapi.functions.Image');
  dynapi.library.include('dynapi.functions.Color');

</script>
<script language="Javascript">

  var l1,l2,l3;

  var wh,lyr=dynapi.document.addChild(new DynLayer(null,500,20,150,150,'yellow'));
  for(var i=0;i<10;i++){
    wh=150-(i*2);
    lyr=lyr.addChild(new DynLayer(null,1,1,wh,wh,dynapi.functions.getRandomColor()));
  }

  var file = dynapi.functions.getImage('./dynapiexamples/images/file.gif',20,24);
  var bin_on = dynapi.functions.getImage('./dynapiexamples/images/bin_on.gif',32,32,{text:'Recycle',textdir:'s'});
  var bin_off = dynapi.functions.getImage('./dynapiexamples/images/bin_off.gif',32,32,{text:'Bin',textdir:'s'});
  var bin_full = dynapi.functions.getImage('./dynapiexamples/images/bin_full.gif',32,32,{text:'Bin Full',textdir:'s'});

  l1=new DynLayer(file.getHTML(),200,80);
  l2=new DynLayer('<br><center>'+bin_off.getHTML()+'</center>',250,50,100,100,'#CCFF00');
  l3=new DynLayer('<br><center>'+bin_off.getHTML()+'</center>',360,50,100,100,'#ffcc00');
  l4=new DynLayer('<br><center>'+bin_off.getHTML()+'</center>',10,10,100,100,'pink');
  l5=new DynLayer('<br><center>'+bin_off.getHTML()+'</center>',5,5,120,120,'yellow');

  lyr.addChild(l5);

  lBase = new DynLayer(null,200,200,150,120,'yellow');
  lBase.addChild(l4);

  l1.setZIndex(100);
  l1.setDragOverStealthMode(false);

  DragEvent.enableDragEvents(l1)

  var evt={
    ondrop:function(e){
      var o=e.getSource();
      o.setHTML('<br><center>'+bin_full.getHTML()+'</center>');
      l1.setLocation(200,80)
    },
    ondragover: function(e){
      var o=e.getSource();
      o.setHTML('<br><center>'+bin_on.getHTML()+'</center>');
    },
    ondragout: function(e){
      var o=e.getSource();
      o.setHTML('<br><center>'+bin_off.getHTML()+'</center>');
    }
  }

  l2.addEventListener(evt);
  l3.addEventListener(evt);
  l4.addEventListener(evt);
  l5.addEventListener(evt);

  dynapi.document.addChild(l2)
  dynapi.document.addChild(l3)
  dynapi.document.addChild(lBase)

  dynapi.document.addChild(l1)

</script>
</head>
<body>
Drag & Drop the file over recycle bins<br>
<script>
  dynapi.document.insertAllChildren();
</script>
<p>
<a href="javascript:;" onclick="l1.setDragOverStealthMode(true);">Activate Stealth Mode</a><br>
<a href="javascript:;" onclick="l1.setDragOverStealthMode(false);">Deactivate Stealth Mode</a>
</p>
</body>
</html>


           
       








dynapi.zip( 791 k)

Related examples in the same category

1.DynAPI Examples - Drag Drop /w Collision Detection
2.Display Drag Icon in drag and drop
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