这里是学习html5的拖放功能。这个API主流浏览器基本支持。ie浏览器是有限支持，dataTransfer.setData/getData。
在html5里面，任何元素都是可以拖放的。
- 需要拖放的元素要添加draggable="true"这个属性。然后设置拖动的时候触发的事件ondragstart="drag(event)"。函数里面设置传递的数据，将拖动元素的信息传递给e.dataTransfer。
- 设置ondragover事件触发的函数。先要将存放元素的容器如div触发ondragover事件，确保容器可以放元素，使用event.preventDefault()方法。然后容器触发ondrop事件，接受e.dataTransfer传递过来的值。
代码：
<style type="text/css" rel="stylesheet">
body {
width:80%;
margin:0 auto;
}
.drop {
border:1px solid black;
width:30%;
height:200px;
float: left;
}
img {
width:20%;
}
</style>
<script type="text/javascript">
function allowdrop(e){
e.preventDefault();
}
function drag(e){
e.dataTransfer.setData('text',e.target.id);
}
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData('text');
e.target.appendChild(document.getElementById(data));
}
function drop_del(e){
e.preventDefault();
var data = e.dataTransfer.getData('text');
//e.target.appendChild(document.getElementById(data));
document.getElementById(data).remove();
}
</script>
</head>
<body>
<div>
<h2>做蛋糕要用哪些材料呢，选出来扔进篮子里吧</h2>
<img src="./ex_1.jpg" alt="pic" id=dragimg1 draggable="true" ondragstart="drag(event)">
<img src="./tx.jpg" alt="pic" id=dragimg2 draggable="true" ondragstart="drag(event)">
<img src="./tx.jpg" alt="pic" id=dragimg3 draggable="true" ondragstart="drag(event)">
</div>
<div class="drop" ondragover="allowdrop(event)" ondrop="drop(event)">
</div>
<div class="drop" ondragover="allowdrop(event)" ondrop="drop_del(event)"><p>多出来的扔掉吧~</p></div>
html5 drag的更多相关文章
-
[转]人人网首页拖拽上传详解(HTML5 Drag&;Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
-
html5 drag api详解
可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 di ...
-
HTML5 drag &; drop &; H5 DnD
HTML5 drag & drop H5 DnD https://html5demos.com/ demos https://html5demos.com/dnd-upload https:/ ...
-
HTML5 drag &; drop 拖拽与拖放简介
DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...
-
HTML5 drag和drop的亲手实践
起因 最近在公司打杂的时候,突然分到了一个锅,就是要支持一个新的功能:用户可以通过拖曳组件来改变组件的顺序.因此,这阵子就看了一下网上的一些drag和drog的文章以及W3C的介绍,然后自己亲手实践了 ...
-
html5 - drag 拖拽
参考资料: 张鑫旭 : http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B% ...
-
Html5 drag&;drop
下面是一个拖放例子 定义如下的两个div,分别是用于拖放后放置新元素的容器和可拖动的元素: <body> <div id="holder" style=" ...
-
HTML5 drag拖动事件
参考链接:https://segmentfault.com/a/1190000013606983 例子: <!DOCTYPE HTML> <html> <head> ...
-
html5 drag and drop
注:链接.图片默认是draggable的. mousemove在整个拖放的过程中不会被触发. dragStart设置: e.dataTransfer.effectAllowed = "mov ...
随机推荐
-
kubernetes 文档
kubernetes 官方文档:http://kubernetes.io/docs/ null
-
简单三个表之间关联 与 case when语句的应用
select p.conttract_id,l.order_code,jz.cur_branch from wy_auto_workflow_log l,wg_pjhsb p,wg_jzmb jz w ...
-
C++多线程的几个重要方法解析CreateEvent / SetEvent /ResetEvent/ 等
1.CreateEvent 是创建windows事件的意思,作用主要用在判断线程退出,程锁定方面. 函功能描述:创建或打开一个命名的或无名的事件对象. HANDLE m_hExit; m_hExit= ...
-
转帖不会乱码的，powershell网络蜘蛛
抓取(爬取)网上信息的脚本程序,俗称网络蜘蛛.powershell中自带了这样的两个命令,[Invoke-WebRequest]和[Invoke-RestMethod],但这两个命令有时候会乱码. 现 ...
-
hdu----(1950)Bridging signals(最长递增子序列 (LIS) )
Bridging signals Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
-
【WCF--初入江湖】06 WCF契约服务行为和异常处理
06 WCF契约服务行为和异常处理 一.WCF契约服务行为 [1] 服务行为可以修改和控制WCF服务的运行特性. 在实现了WCF服务契约后,可以修改服务的很多执行特性. 这些行为(或者特性)是通过配置 ...
-
linux命令——scp
scp linux系统之间基于ssh登录的安全copy文件或者目录.本地［local］—— 远程［remote］{文件} scp local_file remote_username@remote_i ...
-
python入门之一python安装及程序运行
Python 程序要运行,需要先安装python解释器 PVM(这里可对照java的JVM来理解)实际上,你不需要单独安装,直接安装python后就可以了 1.安装python 下载地址:http:/ ...
-
CSS 选择器继承和层叠
CSS选择器及其继承特性.层叠特性1.基本选择器 标记 id class 这个就不再作介绍了 2.复合选择器 交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...
-
Debug_with_docker_in_pycharm
Debug with docker in pycharm Why As I really really appreciate it that we can have a isolated develo ...