这里是学习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. 更换Mac记录

    1. 重装Mac (1)格式化硬盘 (2)重装系统 (3)修改各种配置:电脑名.键盘等 2. 安装必要软件 (1)QQ.微信.网易云音乐等 (2)火狐.谷歌.SourceTree等 (3)安装Git ...

  2. 【javaweb学习】解析XML

    XML解析方式有两种 dom:Document Object Model文档对象模型,是w3c组织推荐的解析方式 sax:Simple Api XML不是官方标准,但它是XML社区实际上的标准,几乎所 ...

  3. pyspider 安装时 Could not run curl-config

    sudo aptitude install libcurl4-openssl-dev

  4. 出售一套Unity + Lua热更新框架代码

    出售一套Unity + Lua的客户端框架代码,功能有资源管理.网络通信.配置文件解析.热更新.文件读写.Lua加密揭秘.UI框架.打包工具.编辑器工具等,已经在多个实际项目(已上线)中使用.代码优雅 ...

  5. Nginx配置加入css缓存配置后，css等文件not found

    现在配置: location / { root /root/html/product; } Probably another block had definition for the static f ...

  6. DWR实现扫一扫登录功能

    前言 <DWR实现后台推送消息到Web页面>一文中已对DWR作了简介,并列出了集成步骤.本文中再一次使用到DWR,用以实现扫一扫登录功能. 业务场景 web端首页点击"登陆&qu ...

  7. kafka Failed to send messages after 3 tries 问题解决

    kafka Failed to send messages after 3 tries. 在kafka0.8开发过程中 生产者测试用例碰到了 Exception in thread "mai ...

  8. Docker应用程序容器技术_转

    转自:百度百科 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相 ...

  9. centos7作为web服务器优化

    centos7作为web服务器优化 原文 http://itindex.net/detail/51140-centos7-web-服务器 1.加大打开文件数的限制(open files) 查看 uli ...

  10. 关于jsp的总结

    第一章:jsp技术不仅是开发web应用的先进技术,而且是进一步学习相关技术的基础.jsp引擎是支持jsp程序的web容器,负责运行jsp,并将有关结果发送到客户端.目前流行的jsp引擎之一是tomca ...