事件对象
在拖动的元素进入到放置目标时执行 JavaScript :
本文底部包含了更多实例。
ondragenter 事件在拖动的元素或选择的文本进入到有效的放置目标时触发。
ondragenter 和 ondragleave 事件可以帮助用户更好的理解可拖动元素进入和离开放置区域的过程。 你可以在可拖动元素进入和离开放置区域时设置不同的背景颜色。
拖放是 HTML5 中非常常见的功能。 更多信息可以查看我们 HTML 教程中的 HTML5 拖放。
注意: 为了让元素可拖动,需要使用 HTML5draggable 属性。
提示: 链接和图片默认是可拖动的,不需要 draggable 属性。
在拖放的过程中会触发以下事件:
表格中的数字表示支持该事件的第一个浏览器的版本号。
事件 | |||||
---|---|---|---|---|---|
ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML 中:
JavaScript 中:
JavaScript 中, 使用 addEventListener() 方法:
注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
是否支持冒泡: | Yes |
---|---|
是否可以取消: | Yes |
事件类型: | DragEvent |
支持的 HTML 标签: | All HTML elements |
以下实例演示了所有的拖放事件:
HTML 教程: HTML5 拖放
HTML 参考手册: HTML draggable 属性
HTML textarea name 属性HTML textarea 标签实例一个带有 name 属性的文本区域:form action="demo_form.html" textarea name="...
HTML td bgcolor 属性 HTML td 标签实例给单元格添加背景颜色:table border="1"trthMonth/ththSavings/th/trtrtd bgcolor="#FF0...
HTML a name 属性 HTML a 标签实例name 属性用于指定锚(anchor)的名称:a name=C4Chapter 4/a浏览器支持所有主流浏览器都支持 ...
HTML a 属性HTML a 标签实例 target 属性规定在何处打开链接文档:a href=http://www..cn target=_blank访问/a浏览器支持所有主流...
HTML command type 属性HTML command 标签实例一个类型为 command 的 command 元素:menucommand type=command label=Save oncli...
HTML font size 属性HTML font 标签实例规定文本的大小:font size=6这是一些文本!/font浏览器支持所有主流浏览器都支持 size ...
HTML form novalidate 属性 HTML form 标签实例当提交表单时不对表单数据(输入)进行验证:form action=demo_form.html novalid...
HTML frame scrolling 属性 HTML frame 标签实例一个总是显示滚动条的框架:frameset cols=50%,50% frame src=frame_a.htm scrol...
HTML iframe name 属性HTML iframe 标签实例作为链接目标的 iframe:iframe src=demo_iframe.htm name=iframe_a/iframea href=ht...