HTML对象的拖放事件

JS处理代码：

var  oNewOption;
//  Code for dynamically adding options to a select.
function  ShowResults(){
//  Information about the events
//  and what object fired them.
arg  =  event.type  +   "   fired by   "   +  event.srcElement.id;
oNewOption  =   new  Option();
oNewOption.text  =  arg;
$id( " oResults " ).add(oNewOption, 0 );
}

function  $id(id){
     return  document.getElementById(id);
}

 

HTML部分：

< P > Source events are wired up to this text box. </ P >
< input  ID ="txtDragOrigin"  value ="Text to Drag"
ondragstart ="ShowResults()"
ondrag ="ShowResults()"
ondragend ="ShowResults()"
>
< P > Target events are bound to this text box. </ P >
< input  ID ="txtDragDestination"  value ="Drag Destination"
ondragenter ="ShowResults()"
ondragover ="ShowResults()"
ondragleave ="ShowResults()"
ondrop ="ShowResults()"
>
< br  />< br  />
< select  ID ="oResults"  size =30 >
< option > List of Events Fired </ option >
</ select >

 

事件结果：