这里是学习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的更多相关文章

  1. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  2. html5 drag api详解

    可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 di ...

  3. HTML5 drag & drop & H5 DnD

    HTML5 drag & drop H5 DnD https://html5demos.com/ demos https://html5demos.com/dnd-upload https:/ ...

  4. HTML5 drag & drop 拖拽与拖放简介

    DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...

  5. HTML5 drag和drop的亲手实践

    起因 最近在公司打杂的时候,突然分到了一个锅,就是要支持一个新的功能:用户可以通过拖曳组件来改变组件的顺序.因此,这阵子就看了一下网上的一些drag和drog的文章以及W3C的介绍,然后自己亲手实践了 ...

  6. html5 - drag 拖拽

    参考资料: 张鑫旭             : http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B% ...

  7. Html5 drag&drop

    下面是一个拖放例子 定义如下的两个div,分别是用于拖放后放置新元素的容器和可拖动的元素: <body> <div id="holder" style=" ...

  8. HTML5 drag拖动事件

    参考链接:https://segmentfault.com/a/1190000013606983 例子: <!DOCTYPE HTML> <html> <head> ...

  9. html5 drag and drop

    注:链接.图片默认是draggable的. mousemove在整个拖放的过程中不会被触发. dragStart设置: e.dataTransfer.effectAllowed = "mov ...

随机推荐

  1. redis服务器

    Redis是一个Key-Value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括 string(字符串 ). list(链表). set(集合)和 zset(有序集合). ...

  2. ansible 小试

    安装: pip install ansible 添加配置文件: 配置文件查找顺序 * ANSIBLE_CONFIG (环境变量) * ansible.cfg (当前目录下) * .ansible.cf ...

  3. 外部函数test显示的返回内部函数add的调用

    前段时间有个需求中有点击datagrid的单元格实现某种事件,皇冠现金代理调用datagrid的onclickCell这个方法很容易实现,但是体验不好啊,完全不知道自己刚才点击的是哪个单元格,然后就尝 ...

  4. C和C++混合编程中的extern "C" {}

    引言 在用C++的项目源码中,经常会不可避免的会看到下面的代码: 1 2 3 4 5 6 7 8 9 #ifdef __cplusplus extern "C" { #endif ...

  5. charles抓包工具分享

    今天,给大组内QA做了一次分享,主要面向移动端测试,介绍了我平时在测试工作中用到的功能,大家都积极响应,现场搭环境,现场操作,现场提问解答,最后大家都成功的利用起来了,感觉很有成就感.下面介绍我今天分 ...

  6. SpringMVC常用配置-配置DispatcherServlet映射请求路径的方式

  7. Python之路-(Django进阶一）

    Django请求生命周期: 首先,客户端发送请求到服务器的urls库,通过匹配url后面的关键字,去找指定app里面的的view. 然后,app通过判断,拿到数据库数据和html模板文件. 最后,将拿 ...

  8. NET基础（4）：引用类型和值类型

    CLR支持两种类型:引用类型和值类型.虽然FCL的大多数类型都是引用类型,但程序员用的最多的还是引用类型,引用类型总是从托管堆分配,c#的new操作符返回对象内存地址-即指向对象数据的内存地址.使用引 ...

  9. redmine常见问题

    1.测试Pop3邮件收件任务:rake redmine:email:receive_pop3 RAILS_ENV="production" host=pop.cecgw.cn po ...

  10. 使用JFinal的第一个项目出现的问题（The return type is incompatible with JspSourceDependent.getDependants()）

    四月 08, 2016 4:35:34 下午 org.apache.catalina.core.ApplicationDispatcher invoke严重: Servlet.service() fo ...