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. hibernate 使用C3P0数据源

    1.导入jar包: hibernate-release-4.3.5.Final/lib/optional/*.jar 2.增加配置: <!-- 配置 C3P0 数据源 --> <pr ...

  2. 乐视mysql面试题

      http://blog.itpub.net/28916011/viewspace-2093197/ 最近,朋友去乐视面试了mysql DBA,以下是我据整理的乐视mysql面试题答案,供大家参考 ...

  3. interactive_timeout

    [mysqld] interactive_timeout  交互式连接 会话1 [root@localhost ~]# mysql -umysql -p Enter password: Welcome ...

  4. careercup-中等难度 17.8

    17.8 给定一个整数数组(有正数和负数),找出总和最大的连续序列,并返回总和. 解法: 就是求连续子序列的和最大,不过存在一个问题: 假设整个数组都是负数,怎么样才是正确的行为呢?看看这个简单的数组 ...

  5. phpcms v9 模板标签说明整理

    1.{template "content","header"} 2.网站网址调用:{siteurl($siteid)}: 3.标签get:分页,{pc:get ...

  6. QQ粘性效果

    演示如下 QQ粘性效果.zip

  7. 今天学习了无序列表和有序列表和使用HTML5创建表格

    ol建立有序列表,该列表可以用设置type="A/a" 其语法架构为 <ol> <li></li> <li></li> ...

  8. xampp 安装后无法启动apache 的解决方法

    1,安装xampp 后,apache 无法启动,当时的报错已经没有证据了,大概的翻译就是端口 被block(锁定)的意思 2,通过 查找端口被占用,找到被占用程序,进行杀掉进程,或者卸载软件,参考网址 ...

  9. JQuery 性能优化

    一.合适的选择器 JQuery 选择器提供丰富的选择器来定位DOM元素, 基本选择器 #id..class.element.*等:那他们哪个更高效呢? 第一选择: $("#id") ...

  10. jquery数据验证插件(自制,简单,练手)

    一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件. (function($) { var defaults = { bugColor: '#FFCCCC', ...