拖放(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的文章有很多, ...
随机推荐
- 为什么 Eclipse 里的 Classpath Variables M2_REPO 无法修改（non modifiable）
本文转载自:http://uule.iteye.com/blog/2034097 解决方法: 在C:\Documents and Settings\Administrator\.m2中放入settin ...
- java代码String创建对象数组，进行排序
总结:String是一个类.对于字串大小比较用方法:compareTo() package com.da.ima2; public class gh { public static void main ...
- 四川第七届 D Vertex Cover（二分图最小点覆盖，二分匹配模板）
Vertex Cover frog has a graph with nn vertices v(1),v(2),…,v(n)v(1),v(2),…,v(n) and mm edges (v(a1), ...
- JAVA方法中的参数用final来修饰的效果
很多人都说在JAVA中用final来修饰方法参数的原因是防止方法参数在调用时被篡改,其实也就是这个原因,但理解起来可能会有歧义,我们需要注意的是,在final修饰的方法参数中,如果修饰的是基本类型,那 ...
- 有关Backgroundworker
(一)Backgroundworker取消时应该用的有关代码: CancelAsync方法是在前台主线程用的,CancellationPending属性是在后台子线程用的.实际的使用方式应该是这样的: ...
- 蓝牙服务 UUID
https://developer.bluetooth.org/gatt/services/Pages/ServicesHome.aspx 手机蓝牙对手机 ,华为平板取红米手机 8 个Audio So ...
- windows 10微软账户不能访问局域网共享，但是本地账户可以访问
windows10有时候无法访问局域网的共享文件夹.会提示没有权限. 如果共享的文件夹已经设置为everyone,那么通常是windows 10用的是微软账户登录的. 有两个方案可以处理这种情况. 一 ...
- 使用网络用户命令行工具的/passwordreq:yes
提示:"新建域时,本地administrator帐户将成为域administrator账户.无法新建域,因为本地administrator账户密码不符合要求.目前,本地administrat ...
- 如何关闭打开了多个activity的activity
专门建立一个类,内部有一个静态的linklist对象,用来记录打开的activity,如果该ACTIVITY没有被打开过,在每一个activity oncreate方法中将自己的实例加入这个list. ...
- 线段树教做人系列(3) HDU 4913
题意及思路看这篇博客就行了,讲得很详细. 下面是我自己的理解: 如果只有2,没有3的话,做法就很简单了,只需要对数组排个序,然后从小到大枚举最大的那个数.那么它对答案的贡献为(假设这个数排序后的位置是 ...