HTML5元素拖拽实现示例
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元素拖拽实现示例的更多相关文章
- HTML5 元素拖拽实现 及 jquery.event.drag插件
如上图片: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
- 【转】C#.net拖拽实现获得文件路径
C#.net拖拽实现获得文件路径 作者Attilax , EMAIL:1466519819@qq.com 思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等), ...
- 【WPF】一些拖拽实现方法的总结(Window,UserControl)
原文:[WPF]一些拖拽实现方法的总结(Window,UserControl) 原文地址 https://www.cnblogs.com/younShieh/p/10811456.html 前文 本文 ...
- selenium操作拖拽实现无效果的替代方案
如果碰到这种情况,无论你是直接通过draganddrop()还是分步执行clickandhold(),dragtoelement(),或通过by_offset位移都无法实现元素拖拽.只能物理模拟了 w ...
- C#.net拖拽实现获得文件路径
思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等), 在DragDrop事件中对“信息”进行解析. 窗体的AllowDrop属性必须设置成tru ...
- Silverlight中的拖拽实现的图片上传
原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...
- WPF ListView 简单的拖拽实现(转)
首先设置ListView的AllowDrop=True:SelectionMode=Extended;并且ListView视图为GridVIew. private void listView1_Mou ...
- C#winform拖拽实现获得文件路径
1.关键知识点说明: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等),在DragDrop事件中对“信息”进行解析.窗体的AllowDrop属性必须设置成true;且 ...
随机推荐
- 理解class.forName()
使用jdbc方式连接数据库时会使用一句代码Class.forName(String className).这句话是什么意思呢?首先说一点Class.forName(String className)这 ...
- android121 zhihuibeijing SlidingMenu(侧边栏效果,使用开源库)
## Splash ## - 旋转 RotateAnimation - 缩放 ScaleAnimation - 渐变 AlphaAnimation 工程可以作为一个库被其他工程当成一个Library使 ...
- N个数字中随机取m个数子,不重复
<script> function rand_nums(min,max,count){ var arr = []; for(var i=min;i<max;i++){ arr.pus ...
- (源)V8 Engine 编译
v8 engine编译 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !imp ...
- iOS 符号表恢复 & 逆向支付宝
推荐序 本文介绍了恢复符号表的技巧,并且利用该技巧实现了在 Xcode 中对目标程序下符号断点调试,该技巧可以显著地减少逆向分析时间.在文章的最后,作者以支付宝为例,展示出通过在 UIAlertVie ...
- 如何使Android Studio项目发布到Jcenter中
Android仓库 简单的普及下关于android的依赖仓库,有两种分别是Jcenter与Maven Central其实不管是Jcenter还是Maven Central都是Maven库. Jcent ...
- mkfs.xfs命令没找到
yum install xfsprogs xfsdump
- 关于Git的分支
分支是代码管理的利器.如果没有有效的分支管理.代码管理就适应不了复杂的开发过程和 项目的需要. 分支命令概述: 在Git中分支管理使用命令git branch.该命令的主要用法如下: 用法一: git ...
- tcpdf MultiCell line break
在程序中,我遇到MultiCell中显示三个字符串,开始时 $pdf->MultiCell(63.5, 30, $name."\n".$address."\n&qu ...
- Python函数中参数* 和 ** 的区别
* 函数接收参数为元组 例如 def myfun(*args): #相当于 def myfun(1,2,3) ==> args 就相当于(1,2,3) for a in args: pri ...