HTML5 拖放(Drag 和 Drop)
HTML5 拖放(Drag 和 Drop)
一、参考地址:https://www.runoob.com/html/html5-draganddrop.html
二、实例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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>拖动 RUNOOB.COM 图片到矩形框中:</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"></body>
</html>
三、代码详解
1、设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :
<img draggable="true">
2、拖动什么 - ondragstart 和 setData()
然后,规定当元素被拖动时,会发生什么。
在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev)
{ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
3、放到何处
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
4、进行放置
当放置被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev)
{ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));
}
代码解释
- 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素(目标元素)中。
HTML5 拖放(Drag 和 Drop)相关推荐
- html拖放数据库字段,利用HTML5拖放(Drag 和 Drop)实现Table间数据的交互
前言 作为开发者,我们总是会不经意间的遇到一些令人头疼的需求.比如五彩斑斓的黑,根据手机壳变换APP的颜色等等,你说怎么办.虽然在一般情况下不会这么棘手,但是有些需求刚拿到的时候还是会一筹莫展. 表格 ...
- HTML5 拖放Drag和drop用法以及事件介绍
dragstart:拖拽开始时在被拖拽元素上触发此事件 drag:拖拽过程中被拖拽的元素会持续不断地发drag事件. dragend:鼠标在拖放目标上释放时,在拖搜元素上触发,将元素从浏览器拖放到操作 ...
- html5 drag this,HTML5拖放(drag和drog)
拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...
- html5css3菜鸟教程,HTML5+CSS3实现拖放(Drag and Drop)示例
本文简单介绍一下HTML5的拖放实现.MXGHTML5中文学习网 - HTML5先行者学习网 拖放(Drag 和 drop)是 HTML5 标准的组成部分.MXGHTML5中文学习网 - HTML5先 ...
- html组态图动态拖拽,基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...
- 基于html5拖(drag)放(drop)实现换装小游戏
编码环境:asp.net mvc3 html5 运行环境:firefox浏览器通过. 一:有关html5的拖放功能,网上介绍的一大把,我将自己学习到的知识点总结如下: 1:全局属性draggable ...
- [Ext JS 4] 拖放[drag and drop]
定义拖放 一个拖动操作,就是在某个页面元素上按下鼠标并移动.一个放下操作,就是在拖动动作之后放开鼠标.可以从下图来看: Ext JS 的Ext.dd 类中定义了基本的拖放操作. 拖放类的组织 所有的拖 ...
- H5 拖放drag跟drop
H5的拖放功能主要是通过drag和drop来实现的,目前IE9.Firefox.Opera 12.Chrome 以及 Safari 5 是支持拖放的,Safari 5.1.2 中不支持拖放.下面先放一 ...
- 拖放(Drag和Drop)--html5
拖放,就是抓取一个对象后拖放到另一个位置.很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻 ...
- Qt拖放 drag and drop
拖放提供一个应用程序之间传递信息的一种简单的可视化机制.拖放机制类似于剪切和粘贴机制.拖放操作同时被QT项目视图和图形视图框架支持. QApplication提供了两个拖放相关的方法: 1. QApp ...
最新文章
- 关于UNION和UNION ALL的区别
- liferay开发文档_Liferay –简单主题开发
- setdefault()方法
- 美商务部再禁6项新兴技术,包括光刻软件和5nm生产技术
- 陌陌 3 千万数据暗网出售;美团反腐 89 人受刑事查处;iPhone 推迟 5G 采用时间 | 极客头条...
- Vue3 插槽使用详解
- 查看MySQL数据库大小
- 2020年20种最佳Android应用程序模板
- xfce实现桌面图标透明
- C++学习历程及感受
- idea、webstorm使用过程出现问题
- bzoj1677:求和
- vue 3.0 使用ref获取dom元素
- Qt入门-QLabel类
- github上的开源项目中gif图片的制作软件
- bars 除障句完整_精选每日一句早安问候语语录49句
- 洛谷1726 上白泽慧音
- Bartender打印
- 互联网晚报 | 8月24日 星期二 | 京东二季度收入2538亿元;小米7亿元成立公寓管理公司;荣耀上线新零售平台“星耀商城”...
- Python实现经典机器学习案例——良/恶性性乳腺癌肿瘤完整数据预测
热门文章
- 地表径流分布数据/水文站点分布/降雨量分布/辐射分布数据
- python标准数据类型复习
- 题目206-矩形的个数
- 循环数组最大子段和--51nod1050
- txt文件保存为Java_java实现写入并保存txt文件
- exception类型 java_程序员小白入门,Java如何选择异常类型?
- android6.0如何锁定程序,如何在Android中制作应用程序锁定应用程序?
- php生成11位不重复数字,php生成8位不重复字符串
- yii2 引入第三方类库
- jquery 同胞 siblings next nextAll nextUtil pre preAll preUtil