HTML对象的拖放事件

简介： JS处理代码： var oNewOption;// Code for dynamically adding options to a select.function ShowResults(){// Information about the events// and what object fired them.

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>

 

事件结果：

推荐博文

• Web 前端工程师和设计师必读精华文章推荐
• 酷！15个精美的 HTML5 单页网站作品欣赏
• 炫！35个让人惊讶的 CSS3 动画效果演示
• 赞！30个与众不同的优秀视差滚动效果网站
• 靓å！25个优秀的国外单页网站设计作品欣赏
• 帅！8个惊艳的 HTML5 和 JavaScript 特效
• 顶！35个很漂亮的国外 Flash 网站作品欣赏
• 哇！34个漂亮网站和应用程序后台管理界面

本博客新站点 ◆ 前端里 ◆ 欢迎围观：）

作者：山边小溪
主站：yyyweb.com 记住啦：）
欢迎任何形式的转载，但请务必注明出处。