HTML5拖拽功能drag
1.创建拖拽对象
给需要拖拽的元素设置draggable属性，它有三个值：
true：元素可以被拖拽；
false：元素不能被拖拽；
auto： 浏览器自己判断元素是否能被拖拽。
2.处理拖拽事件
当我们拖拽对象的时候会触发拖拽事件包括：
A.dragstart：当元素拖拽开始触发；
B.drag：在元素拖拽过程中触发；
C.dragend：元素拖拽结束时触发
3.创建投放区
①当拖拽对象进入投放区的时候会触发相关的事件
A.dragenter：当拖拽对象进入投放区时触发； B.dragover：拖拽对象在投放区内移动时触发； C.dragleave：拖拽对象没有投放到投放区，离开投放区的 时候触发；
D.drop：拖拽对象投放在投放区时触发。
②注意：dragenter、dragover可能会受到默认事件的影 响，所以我们在这两个事件当中使用 e.preventDefault();来阻止事件默认事件
4.使用dataTransfer传递数据
当我们需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法：
1.types：返回数据的格式； 2.getData(<format>)：返回指定格式数据； 3.setData(<format>, <data>)：设置指定格式数据；
4.clearData(<format>)：移除指定格式数据； 5.files：返回已经投放的文件的信息数组。 1.type：文件类型
2.size:文件大小
3.name:文件名
编程实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
margin:30px;
float: left;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrag(event)">
<img src="css/imgs/s3.jpg" id="img1" draggable="true" ondragstart="drag(event)" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrag(event)">
</div>
</body>
<script type="text/javascript">
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
function drop(e){
var data= e.dataTransfer.getData("Text")
e.target.appendChild(document.getElementById(data));
e.preventDefault();
}
function allowDrag(e){
e.preventDefault();
}
</script>
</html>
HTML5拖拽功能drag的更多相关文章
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- HTML5拖拽/拖放(drag & drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...
- HTML5 拖拽功能
本地文件拖动到页面实例:(支持IE) <script> var DragFile = function (goalId) { var g = document.getElementById ...
- RCP：拖拽功能的实现 Drag and Drop
SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...
- Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结
Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...
- html5中的拖拽功能
拖拽元素支持的事件 ondrag 应用于拖拽元素,整个拖拽过程都会调用 ondragstart 应用于拖拽元素,当拖拽开始时调用 ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用 on ...
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- HTML5 拖拽实现
简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...
随机推荐
- 编写安全代码：小心volatile的原子性误解
本文的copyleft归gfree.wind@gmail.com所有,使用GPL发布,可以自由拷贝,转载.但转载请保持文档的完整性,注明原作者及原链接,严禁用于任何商业用途. ============ ...
- JSF2.0 タグ一覧 (h:panelGrid) 編
JSF の HTML (UIComponent) 系タグにはテーブルを作成するタグが2種類用意されています.これらのタグと固有機能系タグを組み合わせることでテーブルを使用した画面を作成可能です. 6. ...
- homework-05 服务器与客户端
首先非常抱歉第三次和第四次作业我没交上来,不想找借口强调原因,但是这两次作业我一定会补上,到时候会@助教.谢谢 回到这次作业! 这次作业邹老师没说博客的格式,所以在这里就没有什么回答问题的东西了.这次 ...
- 现代程序设计homework-02
总体思路 (1)单维数组 单维数组的思路的构建在第一次作业已经完成了,简单来说就是根据贪心策略从头到尾累加,一旦遇到当前累加和变为负数,就将累加和清零,继续遍历数组中的元素,算法的时间复杂度是O(n) ...
- 删除TreeView节点以及其子节点
//1.删除TreeView节点以及其子节点procedure TForm2.Button1Click(Sender: TObject);var TreeNode:TTreeNode;begin i ...
- 如何获得网页上的swf视频教程文件？
网上有很多免费的视频教程,但有的视频教程这能在线观看,无法离线下在,如何获得网页上的swf视频教程文件呢? 我问以"我要自学网"的视频教程为例进行讲解.这是一个我要自学网的PS视频 ...
- ASP.NET线程与异步
什么是线程? 线程简单来说就是一种数据结构,用来管理这个程序的执行状态,其中包括 1.线程核心对象->寄存器的状态 2.线程环境块,是一块用户模式下的内存,包含线程的异常处理链的头部.线程的局部 ...
- Android v4 包和v7包问题
昨天新建了一个android项目,加入了一个bootstrap的外部依赖和一个底部导航栏的外部依赖.结果jj 了,老是提醒我v4包v7包冲突: 事实是这样的,首先我的底部导航依赖库里面有一个v4包,那 ...
- MySQL数据库加密与解密
数据加密.解密在安全领域非常重要.对程序员而言,在数据库中以密文方式存储用户密码对入侵者剽窃用户隐私意义重大. 有多种前端加密算法可用于数据加密.解密,下面我向您推荐一种简单的数据库级别的数据加密.解 ...
- [置顶] 最小生成树Prim算法
二话不说直接贴代码 原图传送门:http://www.tyut.edu.cn/kecheng1/site01/suanfayanshi/minispantree.asp 但是上面展现的是克鲁斯卡尔算法 ...