html5 drag
这里是学习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 ...
随机推荐
- spawn协程学习
对于IO密集型的程序,一般比较高效的做法是选择异步来实现,因为使用异步的方法更容易写出高效的程序.然而使用异步的话,经验较少的人往往会使自己的程序结构变得很混乱,进而导致程序的可读性变差.记得有人说过 ...
- php 获取中文长度 截取中文字符串
#获取中文长度mb_strlen($str,$encoding); #截取中文字符串 mb_substr(str,start,length,encoding);
- vert.x学习（六），动态模板与静态文件的结合
这篇学习在动态模板里面引入css,把动态模板与静态文件结合起来使用. 编写DynamicReference.java package com.javafm.vertx.helloworld; impo ...
- 正则表达式中的exec和match方法的区别
正则表达式中的exec和match方法的区别 字符串的正则方法有:match().replace().search().split() 正则对象的方法有:exec().test() 1.match m ...
- LINUX端口查看
e切依燃 LINUX端口查看 查看文件数 ls | wc -w lsof -i:80
- [功能改进]Live Writer发博支持“建分类、加标签、写摘要”
以前您在园子里用Windows Live Wirter发布博文是不是有以下三个不爽: 不爽1:如果想在发布随笔时新建分类并将随笔添加至该分类,需要先在博客后台添加分类,然后在Live Writer中刷 ...
- [原创]如何在Parcelable中使用泛型
[原创]如何在Parcelable中使用泛型 实体类在实现Parcelable接口时,除了要实现它的几个方法之外,还另外要定义一个静态常量CREATOR,如下例所示: public static cl ...
- oracle or语句的坑
SELECT SUM(tjo.pay_amount) FROM tb_jf_order tjo,tb_jf_gateway_trade_log tjg WHERE tjo.order_id = tjg ...
- 原生node的header
首先引入http模块 获取http.ServerResponse对象的方式,1.http.createServer(function(req,res){}) 其中res是http.ServerResp ...
- Windows Server 2008 R2 域控DOS命令
net user #查看本地用户 net localgroup ...