详解Html5关于拖拽(Drag 和 drop)的使用和事件
拖放(Drag 和 drop)是 HTML5 标准的组成部分。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
1. 相关事件
drag
拖动元素或选择文本时触发此事件。
dragend
当拖动操作结束时(释放鼠标按钮或按下退出键),会触发此事件。
dragenter
当拖动的元素或选择文本输入有效的放置目标时,会触发此事件。
dragexit
当元素不再是拖动操作的选择目标时触发此事件。
dragleave
当拖动的元素或文本选择离开有效的放置目标时,会触发此事件。
dragover
当将元素或文本选择拖动到有效放置目标(每几百毫秒)上时,会触发此事件。
dragstart
当用户开始拖动元素或选择文本时触发此事件。
drop
当在有效放置目标上放置元素或选择文本时触发此事件。
2. 案例解析
<!DOCTYPE HTML>
<html>
<head><style type="text/css">#div1 {width: 450px;height: auto;padding: 30px;border: 1px solid #aaaaaa;}#div1 img {height: 100px;}</style><script type="text/javascript">function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script>
</head>
<body><p>请把图片拖放到矩形中:</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591354852841&di=14fb86558db016cc05e2c6b80aea4249&imgtype=0&src=http%3A%2F%2Fimg.improve-yourmemory.com%2Fpic%2F78739853e99028b1705d953bf722b341-4.jpg"draggable="true" ondragstart="drag(event)" width="100px" />
<img id="drag2" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591354852841&di=14fb86558db016cc05e2c6b80aea4249&imgtype=0&src=http%3A%2F%2Fimg.improve-yourmemory.com%2Fpic%2F78739853e99028b1705d953bf722b341-4.jpg"draggable="true" ondragstart="drag(event)" width="100px" />
<img id="dra3" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591354852841&di=14fb86558db016cc05e2c6b80aea4249&imgtype=0&src=http%3A%2F%2Fimg.improve-yourmemory.com%2Fpic%2F78739853e99028b1705d953bf722b341-4.jpg"draggable="true" ondragstart="drag(event)" width="100px" />
<img id="drag4" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591354852841&di=14fb86558db016cc05e2c6b80aea4249&imgtype=0&src=http%3A%2F%2Fimg.improve-yourmemory.com%2Fpic%2F78739853e99028b1705d953bf722b341-4.jpg"draggable="true" ondragstart="drag(event)" width="100px" /></body>
</html>
拖动后的效果
首先设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :
<img draggable="true" />
拖动之后把被拖的对象保存进这个方法
ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);
}
当拖到指定位置执行相关函数
被放的元素 ondragover 监听时,阻止默认使其可以放元素
监听放置 ondrop 去执行你要做的事情,比如上一个例子,就是把刚才保存的id的dom,然后放入div中
- 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素(目标元素)中
下边这个案例更好说明,拖放事件
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>#draggable {width: 200px;height: 20px;text-align: center;background: white;}.dropzone {width: 200px;height: 20px;background: blueviolet;margin-bottom: 10px;padding: 10px;}</style>
</head>
<body>
<div class="dropzone"><div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">This div is draggable</div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<script type="text/javascript">var dragged;/* events fired on the draggable target */document.addEventListener("drag", function(event) {}, false);document.addEventListener("dragstart", function(event) {// store a ref. on the dragged elemdragged = event.target;// make it half transparentevent.target.style.opacity = .5;}, false);document.addEventListener("dragend", function(event) {// reset the transparencyevent.target.style.opacity = "";}, false);/* events fired on the drop targets */document.addEventListener("dragover", function(event) {// prevent default to allow dropevent.preventDefault();}, false);document.addEventListener("dragenter", function(event) {// highlight potential drop target when the draggable element enters itif (event.target.className == "dropzone") {event.target.style.background = "purple";}}, false);document.addEventListener("dragleave", function(event) {// reset background of potential drop target when the draggable element leaves itif (event.target.className == "dropzone") {event.target.style.background = "";}}, false);document.addEventListener("drop", function(event) {// prevent default action (open as link for some elements)event.preventDefault();// move dragged elem to the selected drop targetif (event.target.className == "dropzone") {event.target.style.background = "";dragged.parentNode.removeChild( dragged );event.target.appendChild( dragged );}}, false);
</script>
</body>
</html>
详解Html5关于拖拽(Drag 和 drop)的使用和事件相关推荐
- Qt之QToolButton 实现动态拖拽Drag、Drop功能
简述 最近在做一个项目需要实现工具的动态添加功能,想来想去也只有动态拖拽最为直观,于是摸索了几天才摸索明白,最后选择了QToolButton作为载体重写了一下.当然也可以选择QPushButton作为 ...
- html5拖放详解,HTML5拖拽/拖放(drag drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - drag 在元 ...
- html dragover获得拖拽对象,突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
拖拽(Drag/Drop)是个非常普遍的功能.你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件.在HTM ...
- html5限制拖拽区域怎么实现,html5怎么实现拖拽
html5实现拖拽的方法:首先新建一个空的HTML5结构:然后在body元素中放置一个div:最后通过allowDrop,drag和drop三个函数实现拖拽功能即可. 本文操作环境:Windows7系 ...
- html语言中,amp;amp;用来表示,详解HTML5中的amp;amp;lt;templateamp;amp;gt;标签
标签,是HTML5入门中的重要知识,需要的朋友可以参考下 一.HTML5 template元素初面2PpHTML5中文学习网 - HTML5先行者学习网 元素,基本上可以确定是2013年才出现的.干嘛 ...
- HTML中的camera标签,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
- html5录音怎么保存到本地,详解HTML5 录音遇到的坑
本文恩主要介绍了详解HTML5 录音的踩坑之旅,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 说实话,一开始都没接触过 HTML5 的 Audio A ...
- html5 摄像头 直播,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
- popstate_详解HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
最新文章
- 类加载器双亲委派模式
- 请教个问题,ajax.net 的效率如何
- int能表示的数据范围(在VS2017下,int和long都是32位)
- element -ui 表单验证 如果 需要验证的v-model 是对象中的对象 总是提示没有填写....
- java监理的职责_承担监理业务和监理责任的一方及其合法继承人被称为()。...
- dataframe 选择输出_使用 Python 实现机器学习特征选择的 4 种方法
- 弹簧触摸开关原理图_10年老电工经验之谈:常见的开关电源那些事儿
- 五、Web服务器——MVC开发模式 EL表达式 JSTL 学习笔记
- 安卓手机qq怎么看密友值_qq亲密关系分数值是什么在哪看 怎么查情侣值或闺蜜值方法...
- WINDOWS8.1 安装 .NET35方法
- sqlserver 2008express版本启用混合登陆和sa
- 财务报表越做越丑?这些秒杀Excel的可视化工具,人人都能用
- Maven的Snapshot版本与Release版本
- python 基础 7.1 datetime 获得时间
- 最新国民经济行业分类sql文件
- 慧鱼机器人编程18子程序
- 计算机怎么通过网线共享网络,怎样用一根网线联接两台电脑实现网络共享?
- 2018年世界人口排名及国土面积
- python爬取的代码_零基础掌握百度地图兴趣点获取POI爬虫(python语言爬取)(代码篇)...
- ./node_modules/.bin/webpack指令出错,该如何解决???