HTML5中的拖拽与拖放(drag&&drop)
1.drag
当拖动某个元素时，将会依次触发下列事件：
1）dragstart：按下鼠标键并开始移动鼠标时，会触发该事件
2）drag：dragstart触发后，随即便触发drag事件，而且在元素被拖动期间，该事件一直被触发
3）dragend：拖动停止时触发该事件
上面的事件的对象是要拖动的元素
2.drop
当某元素被拖动到某个有效的放置目标时，将会依次触发下列事件：
1）dragenter：只要有元素被拖动到该有效放置目标中，便触发该事件
2）dragover：dragenter后，随即触发dragover，且只要元素还在该有效放置目标中，该事件就会一直被触发
3）dragleave/drop：如果元素被拖出了该有效的放置目标的范围，便会触发dragleave事件；反之，如果元素被放置在该有效的放置目标范围内就会触发drop事件而不会触发dragleave事件；
上面的对象是作为放置目标的元素
3.dataTransfer对象
event的dataTransfer对象属性可以在拖放操作的同时实现数据交换。
dateTransfer中最重要的是setData()和getData()方法。getData可以取得由setData保存的值。
setData有两个参数，第一个是保存的数据的类型，第二个是要保存的数据；
getData只一个参数，是setData的第一个参数。
数据的类型支持所有MIME类型，常用的是text(text/plain)和URL(text/uri-list)类型。
eg：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>drag&&drop</title>
</head>
<style>
#testDiv{
border: 2px;
border-style: solid;
border-color: black;
width:200px;
height:200px;
}
.testImg{
width:100px;
height:100px;
}
</style>
<body>
<img id="img1" class="testImg"src="jhjh.png"/>
<img id="img2" class="testImg"src="jhjh.png"/>
<div id="testDiv"></div>
<script>
var img1=document.getElementById("img1");
var img2=document.getElementById("img2");
var testDiv=document.getElementById("testDiv");
img1.addEventListener("dragstart",function(e){
e.dataTransfer.setData("Text",e.target.id);
console.log("ondragstart");
})
img2.addEventListener("dragstart",function(e){
e.dataTransfer.setData("Text",e.target.id);
console.log("ondragstart");
})
testDiv.addEventListener("dragover",function(e){
e.preventDefault();
console.log("ondragover");
})
testDiv.addEventListener("drop",function(e){
var data=e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
console.log("ondrop");
})
</script>
</body>
</html>
在上面的例子中，setData方法被绑定在被拖动的元素的dragstart阶段，而目标放置元素中，dragover事件绑定了event.preventDefault()以阻止dragover事件的默认动作（被拖动的元素回到原来位置），drop事件绑定了getData以获取setDate存储的信息，然后便可以把 被拖动的元素添加到放置目标中。
HTML5中的拖拽与拖放(drag&&drop)的更多相关文章
- html5中的拖拽功能
拖拽元素支持的事件 ondrag 应用于拖拽元素,整个拖拽过程都会调用 ondragstart 应用于拖拽元素,当拖拽开始时调用 ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用 on ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- HTML5多图片拖拽上传带进度条
前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...
- Asp.net中存储过程拖拽至dbml文件中，提示无法获得返回值
Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值,去属性表中设置这时候会提示你去属性表中更改返回类型. 其实存储过程返回的也是一张表,只不过有时候存储过程有点复杂或者写法不规范的话不能 ...
- iOS开发拓展篇—xib中关于拖拽手势的潜在错误
iOS开发拓展篇—xib中关于拖拽手势的潜在错误 一.错误说明 自定义一个用来封装工具条的类 搭建xib,并添加一个拖拽的手势. 主控制器的代码:加载工具条 封装工具条以及手势拖拽的监听事件 此时运行 ...
- iOS - xib中关于拖拽手势的潜在错误
iOS开发拓展篇—xib中关于拖拽手势的潜在错误 一.错误说明 自定义一个用来封装工具条的类 搭建xib,并添加一个拖拽的手势. 主控制器的代码:加载工具条 封装工具条以及手势拖拽的监听事件 此时运行 ...
- HTML5 drag & drop 拖拽与拖放简介
DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5原生拖拽/拖放(drag & drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
随机推荐
- 第四次作业——第一次scrum冲刺
1.小组第一次冲刺任务 对Github上的HUSTOJ开源项目进行Fork,搭建基本环境 2.用户需求 (1)部分基本功能显示在首页 (2)能够提交题目并判题,并对自己所提交的题目正确性进行反馈,能够 ...
- C#获取apk版本信息
获取很多人都会问我为什么要写这个博客,原因很简单,这次研发apk版本信息的时候网上查了很多的资料都没有这方面的信息,因此这次功能完了想写下方法,如果以后博友们遇到了可以直接copy,不用花很多的时间, ...
- beifencode
package com.hesheng.myapplication; import android.content.Context;import android.graphics.Bitmap;imp ...
- C++ inheritance: public, private. protected ZZ
公有继承(public).私有继承(private).保护继承(protected)是常用的三种继承方式. 1. 公有继承(public) 公有继承的特点是基类的公有成员和保护成员作为派生类的成员时, ...
- $.on()方法和addEventListener改变this指向
jQuery $.on()方法和addEventListener改变this指向 标签(空格分隔): jQuery JavaScript jQuery $.on() jq的绑定事件使用$([selec ...
- Long Wei information technology development Limited by Share Ltd interview summary.
Long Wei information technology development Limited by Share Ltd interview summary. I take part in c ...
- 池化层pooling
from mxnet import autograd,nd from mxnet import gluon,init from mxnet.gluon import nn,loss as gloss ...
- docker-2-安装
安装之前确定Centos的相关问题: CentOS Docker 安装 Docker支持以下的CentOS版本: CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版 ...
- 6.spring:AOP(注解）
spring Aop AOP面向切面编程,与OOP面向对象编程相辅相成 AOP中最基本的单元是切面 问题: 代码混乱:越来越多的业务需求(日志&验证)加入后,原有的业务方法急剧膨胀,每个方法 ...
- git的一些小命令
git_cmd git常用命令 <>代表变量,例如 代表分支名称 远程库 查看远程库信息 git remote -v 查看远程仓库:$ git remote -v 添加远程仓库:$ git ...