html5 “拖放”
拖放主要是两个部分组成，drag：拖动，drop：放置！既抓取元素后拖到另一个位置！
要实现拖放首先要把被拖动元素设置为可拖动，既：
draggbile="true"
然后要拖动什么：ondragstart()和setData(),要放到何处：ovdragover(),然后代码将获取的元素进行放置：ondrop();
下面是一个拖动实例，(来回拖放)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 拖动</title>
</head>
<style type="text/css">
.top{width: 700px;height: 160px;border: solid #ccc 1px;margin: 20px 0 0 20px;}
.img1{margin: 20px 0 0 20px;}
</style>
<script type="text/javascript">
/*
*被拖动数据是被拖动元素的ID;
*ondrop():当元素进行放置时发生
*ondragstart()：当元素被拖动时发生
*ondragover():规定在何处放置被拖动元素时发生
*/
function allowDrop(ev){
//设置拖动到何处触发的事件“ondragover”,避免浏览器对元素的默认处理，（浏览器对元素的默认处理是以链接的方式打开）
ev.preventDefault();
}
function drag(ev){
//设置被拖动元素触发事件"ondragstart"和"setData"
ev.dataTransfer.setData("Text",ev.target.id);//通过setData来设置被拖动数据的数据类型和值;"Text":数据类型，值是被拖动元素的id
}
function drop(ev){
//设置元素被放置时发生的事件
ev.preventDefault();//避免浏览器对元素的默认处理
var data=ev.dataTransfer.getData("Text");//通过dataTransfer.getData()来获取被拖动元素的数据，该方法返回在dataTransfer.setData()中设置为相同类型的数据
ev.target.appendChild(document.getElementById(data));//把被拖动元素追加到目标元素中
}
</script>
<body>
<div class="top" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="data:images/img.png" id="drag1" ondragstart="drag(event)" class="img1" draggable="true">
</div>
<div class="top" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
html5 “拖放”的更多相关文章
- HTML5拖放（drag and drop）与plupload的懒人上传
HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...
- HTML5 拖放
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 I ...
- HTML5拖放API
拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...
- HTML5拖放
HTML5拖放 <!doctype html> <html> <head> <meta charset="UTF-8"> <t ...
- HTML5 拖放及排序的简单实现
HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...
- 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 ...
- html5 拖放学习
html5拖放 需要有可拖放元素,可放置的位置(可多个),就像是一个苹果,多个箱子,苹果可以在箱子间来回放置,同样元素也可在多个可放置位置间来回拖放. 如果只有一个位置,元素只可被从原位置托放置唯一目 ...
- HTML5拖放事件（Drag-and-Drop,DnD）
拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target ...
随机推荐
- [CLR via C#]1.6 Framework类库~1.9与非托管代码的互操作性
原文:[CLR via C#]1.6 Framework类库~1.9与非托管代码的互操作性 1.6 Framework类库 1. .NET Framework中包含了Framework类库(Frame ...
- zoj 3822 Domination(dp)
题目链接:zoj 3822 Domination 题目大意:给定一个N∗M的棋盘,每次任选一个位置放置一枚棋子,直到每行每列上都至少有一枚棋子,问放置棋子个数的期望. 解题思路:大白书上概率那一张有一 ...
- Android Bluetooth Stack: Bluedroid（五岁以下儿童）：The analysis of A2DP Source
1. A2DP Introduction The Advanced Audio Distribution Profile (A2DP) defines the protocols and proced ...
- linux 安装httpd（验证通过）
一.安装apache(http服务) 1. 从apache.org下载源码安装包 2. 解压缩 # tar zxf httpd-2.2.4.tar.gz # cd httpd-2.2.4 3. 安装a ...
- Django教程汇总
Django基础教程 被解放的姜戈01 初试天涯 被解放的姜戈02 庄园疑云 被解放的姜戈03 所谓伊人 被解放的姜戈04 各取所需 被解放的姜戈05 黑面管家 被解放的姜戈06 假作真时 Djang ...
- BZOJ 1208 HNOI2004 宠物收容所 平衡树/set
标题效果:有一个宠物收容所.目前还没有被采纳的宠物或谁想要领养宠物,每个宠物有个性值,大家谁想要领养宠物具有理想人格值.每一刻,宠物收容所只是为了有谁想要领养宠物或宠物的人. 当领走宠物,将有一定程度 ...
- linux下编译安装mysql5.5以上版本
安装cmake: tar zxvf cmake-2.8.4.tar.gz cd cmake-2.8.4 ./configure --prefix=/usr/local/cmake make & ...
- C#播放流媒体的几种方法
原文:[转载]C#播放流媒体的几种方法 做视频开发要学的东西真多,不知道如何入门,乱打乱撞,慢慢摸索吧! 首先搭建Windows Meida Server ,方法很简单,试试就会.在这里需要声明的是, ...
- 初探Django线程发送邮件
最近一直在纠结一个邮件发送的问题. 在本地Linux下搭建程序,不填写EMAIL设置就可以成功发送邮件,在远端的云服务器下的Linux环境就发送不了.在windows下搭建的程序也不能发送注册邮件,很 ...
- EventBus(事件总线)
EventBus(事件总线) Guava在guava-libraries中为我们提供了事件总线EventBus库,它是事件发布订阅模式的实现,让我们能在领域驱动设计(DDD)中以事件的弱引用本质对我们 ...