html5 拖放事件
1、设置元素可拖拽属性:draggable
- true表示可拖拽。
- false表示不可拖拽。
- auto默认值，img和带href属性的a标签则表示可拖拽，其他标签表示不可被拖拽。
- 其他值表示不可拖拽。
- 兼容FF：需要在ondragstart事件中设置ev.dataTransfer.setData("",""),元素才可以被拖拽。
2、拖拽元素事件：
- dragstart：拖拽前触发，即鼠标按下，被拖拽元素被拖拽的瞬间触发。
- event.dataTransfer的大部分设置均在这里配置
- 若调用event.preventDefault()则会阻止拖拽行为，导致后续的拖拽事件不被触发
- 触发dragstart事件后，其他元素的mousemove,mouseover,mouseenter,mouseleave,mouseout事件均不会被触发了
- drag：拖拽前、拖拽结束之间连续触发，即使鼠标没有移动，只要未释放，都会触发。
- dragend:拖拽结束触发，即释放鼠标触发。
3、目标元素事件：
- dragenter：进入目标元素触发，相当于mouseover
- dragover：被拖拽元素在目标元素上移动时触发，相当于mousemove
- 可以在这里设置dropEffect的值，事件的默认行为是将dropEffect设置为none
- 该事件是被拖拽元素在目标元素上移动一段时间后才触发
- 事件的默认行为是不允许被拖拽元素在其他元素上释放或放置（即无法触发 drop 事件），需要通过 event.preventDefault() 来阻止默认行为才能触发后续的 drop 事件。
- dragleave：被拖拽元素离开目标元素时触发
- drop：被拖拽元素放置在目标元素上时触发（释放鼠标）
- 对于外来的被拖拽元素（超链接、文件、图片源）， drop 事件的默认行为是浏览器将当前页面重定向到被拖拽元素所指向的资源上
- 对文档内部的被拖拽元素，IE10+和Chrome下的默认行为是不作为，而FF得默认行为是新打开一个文档用于访问被拖拽元素所指向的资源
4、事件执行顺序：
- drop不触发的时候：dragstart > drag > dragenter > dragover > dragleave > dragend
- drop触发的时候（dragover阻止了默认事件）：dragstart > drag > dragenter > dragover > drop > dragend
5、dataTransfer对象：
- [object DragEvent]对象：继承自[object MouseEvent]对象，其实就多了一个dataTransfer属性。
- [object DataTransfer]对象详解：传递数据，数据类型为字符串和文件类型。
- effectAllowed和dropEffect属性。（http://www.cnblogs.com/fsjohnhuang/p/3961066.html#t8）
6、其他属性：
- items:数据类型为DataTransferItemList，存储DataTransfer对象中所有的数据项。
- files:数据类型为FileList（IE5~9没有该属性）。
- types:数据类型为DOMStringList，存储DataTransfer对象中所有数据项的数据类型。
7、方法：
- addElement():添加一起跟随鼠标移动的元素。仅在 dragstart 事件中调用。
- setDragImage(image,x,y):设置拖动时跟随鼠标移动的图片，用来替代默认的元素，若image不是图片元素则会元素临时转换为图片；x用于设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。仅在 dragstart 事件中调用。IE10+不支持该方法；
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟回收站</title>
<style type="text/css">
li{
list-style: none;width:100px; height:25px; line-height: 25px; background:#ccc; margin:5px; text-align: center;
}
#recycle{
width:200px; height:100px; background:red; position: absolute; top:200px;
}
</style>
</head>
<body>
<ul id="list">
<li draggable="true">图标1</li>
<li draggable="true">图标2</li>
<li draggable="true">图标3</li>
</ul>
<div id="recycle"></div>
</body>
</html>
<script>
window.onload = function(){
var oList = document.getElementById("list");
var aLi = oList.getElementsByTagName("li");
var oRecycle = document.getElementById("recycle"); var flag = false; //标示是否把图标放入到回收站
for(var i = 0 ; i<aLi.length;i++){
aLi[i].index = i;
aLi[i].ondragstart = function(ev){
ev = ev || window.event;
ev.dataTransfer.setData("index",this.index); ev.dataTransfer.setDragImage(getImg(),0,0);
}
aLi[i].ondragend = function(ev){
flag && oList.removeChild(this);
}
} oRecycle.ondragover = function(ev){
ev.preventDefault();
}
oRecycle.ondrop = function(ev){
var index = ev.dataTransfer.getData("index");
this.appendChild(getLiByIndex(index));
flag = true;
} function getImg(){
var oImg = document.createElement("img");
oImg.src = "img/111.png";
return oImg;
} function getLiByIndex(index){
for(var i = 0 ;i < aLi.length;i++){
if(aLi[i].index == index) return aLi[i];
}
}
}
</script>
模拟回收站
尊重原创：http://www.cnblogs.com/fsjohnhuang/p/3961066.html
html5 拖放事件的更多相关文章
- HTML5拖放事件（Drag-and-Drop,DnD）
拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target ...
- HTML5拖放事件-上传图片预览功能
主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...
- HTML5拖放（drag and drop）与plupload的懒人上传
HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...
- HTML5 拖放
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 I ...
- HTML5 拖放（Drag 和 Drop）
拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. <!DOCTYPE HTML> <html> <hea ...
- HTML5拖放API
拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...
- HTML5 拖放（Drag 和 Drop）功能开发——基础实战
随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...
- 【Demo】HTML5拖放--简单demo
用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后------- 实现代码: <!DOCTYPE html> ...
- HTML5: HTML5 拖放
ylbtech-HTML5: HTML5 拖放 1.返回顶部 1. HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 将 RUNOOB.C ...
随机推荐
- iOS crash log 解析 symbol address = stack address - slide 运行时获取slide的api 利用dwarfdump从dsym文件中得到symbol
概述: 为什么 crash log 内 Exception Backtrace 部分的地址(stack address)不能从 dsym 文件中查出对应的代码? 因为 ASLR(Address spa ...
- vc++6.0创建console32之.c的应用程序详解
文件-->新建-->win32-->取一个名字,确定 文件-->新建-->c++Source-->取一个名字,记住以.c为后缀,确定 编写简单的程序调试
- 2.git进阶篇总结
阅读 Git 原理详解及实用指南 记录 进阶 1 - HEAD.master 与 branch: 介绍了 Git 中的一些「引用」:HEAD.master.branch.这里总结一下: HEAD 是指 ...
- 【7】Django网页视图模板处理
天下难事必作於易.天下大事必作於细.是以圣人终不为大,故能成其大 --老子<道德经> 本节内容 HTML页面的渲染 使用页面模板 异常处理 超链接路径处理 路由命名空间 1. HTML页面 ...
- BZOJ 4327 [JSOI2012]玄武密码 (AC自动机)
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=4327 题解: 做法挺显然,建出AC自动机之后在上面跑,标记所有走过的点,然后再进行递推 ...
- Codeforces Round #400 (Div. 1 + Div. 2, combined)——ABCDE
题目戳这里 A.A Serial Killer 题目描述似乎很恶心,结合样例和样例解释猜测的题意 使用C++11的auto可以来一手骚操作 #include <bits/stdc++.h> ...
- Leetcode 49.字母异位词分组
字母异位词分组 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", " ...
- linux系统监控：记录用户操作轨迹，谁动过服务器
1.前言 我们在实际工作当中,都碰到过误操作.误删除.误修改过配置文件等等事件.对于没有堡垒机的公司来说,要在linux系统上深究到底谁做过配置文件的修改.做过误删除是很头疼的事情,特别是遇到删库跑路 ...
- asp.net--解决上传文件大小限制
原文地址 第一种方法,主要适用于IIS6.0版本 一.修改配置Web.Config文件中的httpRuntime节点 对于asp.net,默认只允许上传4M文件,增加如下配置,一般可以自定义最大文件大 ...
- Intellij Idea：创建带签名的APK
步骤如下: 1. 选择菜单Build -> Generate Signed APK… 2. 创建或选择已存在的Key Store(选择已存在的Key Store的话直接跳到第5步) 3. 输入K ...