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 >

 

事件结果:

相关文章
|
11月前
|
移动开发 HTML5
HTML5 拖放(Drag 和 Drop)2
为了实现元素的可拖放功能,首先需将元素的 `draggable` 属性设为 `true`。接着,使用 `ondragstart` 事件指定拖动开始时的动作,通过 `dataTransfer.setData()` 设置拖动数据的类型和值。`ondragover` 事件用于确定放置位置,并通过 `event.preventDefault()` 允许放置。最后,`ondrop` 事件触发时执行放置操作,使用 `dataTransfer.getData()` 获取拖动数据并将其追加到目标元素中。
|
11月前
|
Web App开发 移动开发 iOS开发
HTML5 拖放(Drag 和 Drop)1
HTML5拖放功能是标准的一部分,允许用户将任何元素从一个位置拖放到另一个位置。此功能在主流浏览器如IE、Firefox、Chrome和Safari中得到支持(注意Safari 5.1.2除外)。通过拖放,可以实现更直观的交互体验,例如将RUNOOB.COM图标拖入指定矩形框内。
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
本文介绍了如何在Twaver-HTML5中监听网络视图操作事件,包括视图绘制、鼠标事件以及获取鼠标下的网元等。
119 1
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
|
12月前
|
移动开发 JavaScript 前端开发
HTML5 服务器发送事件(Server-Sent Events)详解
**服务器发送事件(Server-Sent Events, SSE)** 是一种用于构建单向实时通信的技术,允许服务器主动向客户端(通常是浏览器)推送更新。SSE 提供了一个简单的 API,非常适合实时应用,如新闻更新、天气变化、社交媒体通知等。SSE 基于 HTTP 协议,通过长连接实现数据传输。其主要优点包括简洁的 API、持久连接和自动重连功能。大多数现代浏览器都内置了对 SSE 的支持。通过简单的服务器端和客户端代码,可以轻松实现数据的实时推送和接收。
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
80 5
|
移动开发 JavaScript API
HTML5 拖放详解
HTML5 的拖放功能增强了网页的互动性和用户友好性,允许用户通过拖动操作移动网页元素。其核心包括拖动源和放置目标,并提供了 `draggable` 属性及多个事件(如 `dragstart`、`dragover` 和 `drop`)来实现这一功能。示例代码展示了如何使用这些 API 创建一个简单的拖放组件,通过设置样式和监听事件来提升用户体验。在实际应用中,需注意样式提示和浏览器兼容性测试。
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
173 1
|
存储 JavaScript 前端开发
HTML中onblur事件的使用
HTML中onblur事件的使用
|
移动开发 HTML5
详解 HTML5 服务器发送事件(Server-Sent Events)
详解 HTML5 服务器发送事件(Server-Sent Events)
315 0
|
JavaScript 前端开发 搜索推荐
HTML拖放
HTML拖放
147 0