DynAPI Examples - Drag Over Event
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');
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('
'+bin_off.getHTML()+' ',250,50,100,100,'#CCFF00');
l3=new DynLayer('
'+bin_off.getHTML()+' ',360,50,100,100,'#ffcc00');
l4=new DynLayer('
'+bin_off.getHTML()+' ',10,10,100,100,'pink');
l5=new DynLayer('
'+bin_off.getHTML()+' ',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('
'+bin_full.getHTML()+' ');
l1.setLocation(200,80)
},
ondragover: function(e){
var o=e.getSource();
o.setHTML('
'+bin_on.getHTML()+' ');
},
ondragout: function(e){
var o=e.getSource();
o.setHTML('
'+bin_off.getHTML()+' ');
}
}
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)
Drag & Drop the file over recycle bins
Activate Stealth Mode
Deactivate Stealth Mode
dynapi.zip( 791 k)