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>

 

事件结果：