HTML5元素拖放
2017-03-01 15:33
211 查看
注:如果文本出现不能自动换行现象,请将游览器调成兼容模式
在某个元素上按下,然后开始移动鼠标,在移动的过程中,只要没有松开鼠标,将会不断产生拖动事件,这个过程称为“拖”。
把被“拖”的移到另一个元素上并松开鼠标,这个动作被称为“放”。
拖放操作“拖”和“放”两个动作组成。
被拖动元素经过的元素
对于其他元素来说,想要把他变成拖动的,只要把该元素的draggable属性设置为true即可。
为了document对象可以接受“放”,可以为document对象的ondragover事件指定监听器,返回一个false,取消document对象对拖动事件的默认行为,这样,拖动时就不会显示“禁止”的图标了,如果只需要对某一个HTML元素进行接受,那就将此元素对象的ondragover事件指定监听器,返回一个false。
概叙
HTML5中的元素都是可以拖放的,拖放可以分成两个动作。在某个元素上按下,然后开始移动鼠标,在移动的过程中,只要没有松开鼠标,将会不断产生拖动事件,这个过程称为“拖”。
把被“拖”的移到另一个元素上并松开鼠标,这个动作被称为“放”。
拖放操作“拖”和“放”两个动作组成。
了解拖放相关操作
被拖动的元素ondragstart:开始拖动触发此事件 ondrag:拖动时不断触发此事件 ondragend:拖动结束触发此事件
被拖动元素经过的元素
ondragenter:被拖动的元素进入此元素范围内触发此事件 ondragover:被拖动的元素进入此元素范围内拖动时会不断的触发此事件 ondraglcave:被拖动的元素离开此元素范围内触发此事件 ondrop:被拖动的元素放到了此元素里触发此事件
了解DataTransfer对象
拖动触发的事件对象里有一个dataTransfer属性,该属性值是一个DataTransfer对象,通过此对象,可以让拖放操作实现更丰富的功能,例如存取数据,设置拖放行为等,在次就不做跟详细的介绍了。更详细请参考:HTML5中dataTransfer对象应用详解启动“拖”
在HTML5中 < img../ >元素默认是可以拖动的;而< a../ >元素只要设置了href属性,默认也是可以拖动的。对于其他元素来说,想要把他变成拖动的,只要把该元素的draggable属性设置为true即可。
<div draggable="true"></div>
接受“放”
在拖动的过程中,不管是拖动< img../ >元素还是< div../ >元素,拖动时都显示了一个“禁止”的图标,这表明被拖动到“目的地”并不接受此拖动元素,这是因为document对象默认是阻止了此拖动事件,而其它HTML元素也是位于document对象内的,因此它们也不能接受“放”。为了document对象可以接受“放”,可以为document对象的ondragover事件指定监听器,返回一个false,取消document对象对拖动事件的默认行为,这样,拖动时就不会显示“禁止”的图标了,如果只需要对某一个HTML元素进行接受,那就将此元素对象的ondragover事件指定监听器,返回一个false。
<script> document.ondragover = function(event){ return false; } </script>
相关文章推荐
- html5实现本页面元素拖放和本地文件拖放
- Html5实现如何在两个div元素之间拖放图像
- HTML5元素拖拽drag与拖放drop相关API
- HTML5系列二(标签元素、FileReader、拖放)
- 【前端知识点】HTML5中用户体验——元素拖放
- HTML5实现页面元素拖放
- HTML5 元素拖放
- HTML5元素拖拽drag与拖放drop相关API
- HTML5之拖放功能(多文件上传和元素拖放)
- HTML5实现元素的原生拖放(drag&drop)【涉及Event对象】
- HTML5拖放
- 让IE支持HTML5元素作为CSS选择器
- HTML5基本元素初探
- HTML5 嵌入元素(20160807-0007)
- css3元素简单的闪烁效果实现(html5 jquery)
- Html5 图片拖放上传
- 【HTML5】Canvas 内部元素添加事件处理
- html5元素拖拽效果
- Extjs框架html5中input、textarea的placeholder,元素内容为空时,颜色为灰色
- HTML5表单新增元素和属性(2)