拖放(Drag和Drop)--html5
拖放，就是抓取一个对象后拖放到另一个位置。很常用的一个功能，在还没有html5的时候，我们实现这个功能，通常会用大量的js代码，再利用mousemove,mouseup等鼠标事件来实现，总的来说比较麻烦。在html5中，引入了可以直接进行拖放的api，大大简化了我们的操作。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。
如何实现
接下来用个实例来总结一下拖放的几个步骤：
第一步：设置元素为可拖放
利用draggable="true"设置元素为可拖放。
比如这样：
<img src="" draggable="true">
或这样
<div draggable="true">haha</div>
第二步:拖动开始和设置拖动数据-ondragstart和setData
在一个元素中，ondragstart属性会调用一个函数，这个函数定义了被拖动的数据，dataTransfer.setData()方法设置了
被拖数据的数据类型和值，数据类型可自己设置（即下面代码中的“Text”）。值即被拖数据的id，所以拖动元素和被放置
元素均需设置id。
如下：
<div id="div2" draggable="true" ondragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">hahahhahhahahahaha</div>
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
第三步：放在何处-ondragover
ondragover规定被拖动的数据放置在何处。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式，在这里，调用 preventDefault() 来避免浏览器对
数据的默认处理。
<div id="div1" ondragover="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>
function allowDrop(ev){
ev.preventDefault();
}
第四步：进行放置-ondrop
当放置被拖数据时，会发生ondrop 事件。ondrop会调用一个函数。
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("dd");
ev.target.appendChild(document.getElementById(data));
}
上面代码中getData()方法里的数据类型必须与setData()里定义的数据类型一致。
全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>
<img id="div3" src="QQ图片20150925120406.jpg" draggable="true" ondragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">
<div id="div2" draggable="true" ondragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">hahahhahhahahahaha</div>
</body>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("dd",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("dd");
ev.target.appendChild(document.getElementById(data));
}
</script>
拖放(Drag和Drop)--html5的更多相关文章
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- HTML5 拖放---drag和drop
拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true: 例:<div id="div" draggable="true"&g ...
- HTML 5 拖放(Drag 和drop)
浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加on ...
- Android开发者指南-用户界面-拖放-Drag and Drop[原创译文]
英文原文:http://developer.android.com/guide/topics/ui/drag-drop.html 版本:Android 4.0 r1 译者注:黄色底色为未决译文 快 ...
- 在Blazor中实现拖放(drag and drop)
前言 我在实现一个含有待办列表功能的页面时,发现了一个好看的设计,它将待办分为--"待办","正在进行",和"已完成"三种状态,并且将待办通 ...
- HTML5 拖放（Drag 和 Drop）功能开发——基础实战
随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5 拖放（Drag 和 Drop）详解与实例
简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaSc ...
- HTML5 拖放（Drag 和 Drop）详解与实例(转)
公司要开一个技术分享会,给我们出了几个简单的题去实现,其中有如何实现表格中列之间的拖拽,我知道html5中有个新方法可以实现,但是没有认真学习,现在闲了去学学,发现关于drag和drop的文章有很多, ...
随机推荐
- [转载]python datetime处理时间
Python提供了多个内置模块用于操作日期时间,像calendar,time,datetime.time模块我在之前的文章已经有所介绍,它提供 的接口与C标准库time.h基本一致.相比于time模块 ...
- Spring 自动注册及自动装配
Spring支持三种注册Bean及装配Bean的方式: 显式地在Java代码中注册及装配 显示地在Xml文件中注册及装配 隐式地装配,即自动注册及装配 这三种方式可以混合使用.选择哪种更多地是看个人品 ...
- [转] Linux 查找文件内容
Linux查找文件内容的常用命令方法. 从文件内容查找匹配指定字符串的行: $ grep "被查找的字符串" 文件名例子:在当前目录里第一级文件夹中寻找包含指定字符串的.in文件g ...
- HTTP-Runoob：HTTP简介
ylbtech-HTTP-Runoob:HTTP简介 1.返回顶部 1. HTTP 简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网 ...
- PostgreSQL recovery.conf恢复配置
PostgreSQL recovery.conf恢复配置 这一章描述recovery.conf 文件中可用的设置.它们只应用于恢复期.对于你希望执行的任意后续恢复, 它们必须被重置.一旦恢复已经开始, ...
- Set,Sorted Set相关命令操作，批量插入及管道，事务
Set SADD key member [member ...] 向key指定的set集合添加成员,次集合是排重的,从2.4版本后才支持添加多个如果key不存在则创建key以及set集合返回当前操作成 ...
- struts2中常用constant命令配置
struts.objectFactory这个属性用 于说明Struts2的 对象池创建工厂,Struts2也有自己的对象池,就像Spring那样,在配置文件中你可以引用对象池中的对象,你可以借助于Sp ...
- 使用Asset Pipeline管理rails生产环境静态资源实现步骤
1. 修改项目中指向静态资源文件的链接 a) 访问静态资源文件 <%= stylesheet_link_tag "application", media: &q ...
- Ubuntu登录异常： 输入正确的密码， 但是却无法进入系统， 总是返回到登录界面， 但是用ctrl+alt+F1-F文字界面登录都可以进入。
今天打开电脑的时候, 在输入密码之后, 未进入ubuntu的桌面, 而是显示了几行英文之后有返回到了登录界面.显示的英文如下: could not write bytes: Broken pipe ...
- Microsoft Office Visio 2010如何创建UML 用例图
转自:https://blog.csdn.net/mmoooodd/article/details/10513059 1..在Microsoft Office2010中打开Microsoft Visi ...