HTML5现在前端圈中，已然成为一个不那么新的技术词汇了，很多公司也把HTML5也当成了硬性的技能要求，但是很多前端恐怕都不了解HTML5的拖拽怎么实现吧。

看了下极客学院的视频，大概的了解了下思路。所以整理备份，便于以后查阅。先上示例：

index.html

 <!doctype html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Drag</title>

     <style>

         .box{

             width: 400px;

             height: 400px;

             float: left;

         }

         #box1{

             background: #CCC;

         }

         #box2{

             background: #FF0;

         }

     </style>

 </head>

 <body>

 <div id="box1" class="box"></div>

 <div id="box2" class="box"></div>

 <img src="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />

 <script src="app1.js"></script>

 </body>

 </html>

app1.js

 /**

  *   app1.js

  */

 var oBox1,

     oBox2,

     oImg1;

 window.onload = function(){

     oBox1 = document.getElementById('box1');

     oBox2 = document.getElementById('box2');

     oImg1 = document.getElementById('img1');

     //

     oBox1.ondragover = oBox2.ondragover = function(e){

         e.preventDefault();

     };

     //

     oImg1.ondragstart = function(e){

         e.dataTransfer.setData('text', e.target.id);

     };

     oBox1.ondrop = dropImg;

     oBox2.ondrop = dropImg;

 };

 function dropImg(e){

     e.preventDefault();

     var tempImg = document.getElementById(e.dataTransfer.getData('text'));

     e.target.appendChild(tempImg);

 }

涉及知识点

在拖放的过程中会触发以下事件：
在拖动目标上触发事件 (源元素)
　　ondragstart - 用户开始拖动元素时触发
　　ondrag - 元素正在拖动时触发
　　ondragend - 用户完成元素拖动后触发

释放目标时触发的事件
　　ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
　　ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
　　ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
　　ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

event对象（以e代替）

e.target

　　W3Cschool上的解释是：返回触发此事件的元素（事件的目标节点），这个target属性只兼容ie9及以上

e.preventDefault()

　　取消事件的默认动作。

e.dataTransfer.setData()

　　设置被拖数据的数据类型和值。

e.dataTransfer.setData("Text",ev.target.id);       //第一个参数为Text（小写的也行）

e.dataTransfer.getData()

　　获得被拖的数据。

e.dataTransfer.getData("Text");

HTML5元素拖拽实现示例的更多相关文章

  1. HTML5 元素拖拽实现 及 jquery.event.drag插件

    如上图片: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. html5简单拖拽实现自动左右贴边+幸运大转盘

    此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...

  3. 【转】C#.net拖拽实现获得文件路径

    C#.net拖拽实现获得文件路径 作者Attilax ,  EMAIL:1466519819@qq.com 思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等), ...

  4. 【WPF】一些拖拽实现方法的总结（Window，UserControl）

    原文:[WPF]一些拖拽实现方法的总结(Window,UserControl) 原文地址 https://www.cnblogs.com/younShieh/p/10811456.html 前文 本文 ...

  5. selenium操作拖拽实现无效果的替代方案

    如果碰到这种情况,无论你是直接通过draganddrop()还是分步执行clickandhold(),dragtoelement(),或通过by_offset位移都无法实现元素拖拽.只能物理模拟了 w ...

  6. C#.net拖拽实现获得文件路径

    思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等),  在DragDrop事件中对“信息”进行解析.        窗体的AllowDrop属性必须设置成tru ...

  7. Silverlight中的拖拽实现的图片上传

    原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...

  8. WPF ListView 简单的拖拽实现(转)

    首先设置ListView的AllowDrop=True:SelectionMode=Extended;并且ListView视图为GridVIew. private void listView1_Mou ...

  9. C#winform拖拽实现获得文件路径

    1.关键知识点说明: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等),在DragDrop事件中对“信息”进行解析.窗体的AllowDrop属性必须设置成true;且 ...

随机推荐

  1. C++文件读写（转载）

    原网页地址:http://blog.csdn.net/kingstar158/article/details/6859379 下文全部转载自以上网页,感谢原作者的贡献. 在看C++编程思想中,每个练习 ...

  2. iOS开发——开发技巧&LLDB详解

    开胃小菜--简单的断点调试 在xcode中打开一个app,在想要break的行号上单击,即可生成一个深色的箭头标识--断点.如下图,在viewDidLoad:中设置了断点. 运行app,等待...就可 ...

  3. (function(){}).call(window) 严格模式匿名函数的this指向undefined

    上次在群里,看到有人发出 (function(){}).call(window) 这么一段代码,问这有什么意义,匿名函数中的this不是始终都指向window的么,为什么还要call,我当时也很疑惑. ...

  4. Android高手进阶教程(七)之----Android 中Preferences的使用!

    http://blog.csdn.net/Android_Tutor/article/details/5531849 大家好,我们这一节讲的是Android Preferences 的学习,Prefe ...

  5. javascript笔记02：严格模式的特定要求

    1.严格模式变量必须声明,不然会报错: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  6. windows下搭建属于自己的web服务器

    这次需要记录一下我搭建web服务器的过程. 第一步,确定自己要使用的平台:这次我用的是windows2008 server版本 第二步,计划是想要纯手工的安装apache.php等.但是我们可以下载一 ...

  7. uva - 10833 Supermean(二项式系数，对指数)

    模拟发现,每个元素求和时,元素的系数是二项式系数,于是ans=sum(C(n-1,i)*a[i]/2^(n-1)),但是n太大,直接求会溢出,其实double的范围还是挺大的,所以可以将组合数转化成对 ...

  8. 基于mvc结构的前端页面框架搭建

    前端开发一年了,向大家交流下自己实践总结下来的一点点开发心得.人生难免磕磕碰碰,前进的道路很多,在学习工作上我们都得学会如何让自己过的更高效,代码亦是如此. 下面,开始介绍自己总结的前端框架搭建(布局 ...

  9. JS学习笔记——标准对象

    一.对象 在js中万物皆对象. 二.对象类型 number.string.boolean.undefined.function.object等 用typeof来获取对象的类型 如: alert( ty ...

  10. SQLite 入门教程（一）基本控制台（终端）命令

    一.基本简介 SQLite 是一个自持的(self-contained).无服务器的.零配置的.事务型的关系型数据库引擎.因为他很小,所以也可以作为嵌入式数据库内建在你的应用程序中.SQLite 被应 ...