拖放(drag和drog)是HTML5的标准的组成部分，也是种常见的特性，意义为抓起一个元素放入到另外的一个位置，在HTML5中任何元素都可以被拖放，前题是要相关进行设置。

1、设置元素为可拖放，也就是把drapgable属性设置为true

2、拖动什么-ondragstart和setData(),规定元素被拖动时会发生什么？

(1):ondragstart属性调用了一个函数drag(ev)，它规定了被拖动的数据.

(2):ev.dataTransfer.setData()方法设置被拖动数据的数据类型和值

funcation drag(ev){

ev.dataTransfer.setData("Text",ev.target.id);

//数据类型是："Text",值是可拖动元素的id

}

3、放置何处-ondragover,

ondragover事件规定被拖动元素放置在何处，默认地是无法将数据或元素拖放到其它元素中的，如果需要设置允许放置，我们必须阻止对元素的默认处理方式，这里就需要用到ondragover事件的event.preventDefault()方法

4、进行放置-ondrog

当放置被拖动元素时，会发生drop事件，ondrop属性会调用一个函数drop(event)

function drop(ev)

{

ev.preventDefault();//调用preventDefault()方法是用来阻止浏览器对元素的默认行为，(drap)的默认行为是以链接的形式打开

var data=ev.dataTransfer.getData("Text");//通完dataTransfer.getData("Text")方法获取被拖动的数据，该方法将返回和setData("Text")方法中设置为相同类型的任何数据

ev.target.appendchild(document.getElementById(data)//被拖动数据是被拖元素的id);//把被元素追加到放置元素中

}

实例1：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Css/jquery-2.1.4.js"></script>
<script>
function drag(ev)//放置什么
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function dragOver(ev) {//如何放置
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
div {
width:280px;
height:250px;
border:1px solid #aaaaaa;
padding:10px;
}
</style>
</head>
<body>
<article>
<h2>将HTML5LOGO放入到上面的方框中</h2>
<div id="div1" ondrop="drop(event)" ondragover="dragOver(event)"></div>
<figure>
<figcaption>HTML5LOGO</figcaption>
<img id="logo5" src="Images/HTML5LOGO.jpg" draggable="true" ondragstart="drag(event)"/>
</figure>
</article>
</body>
</html>

实例2：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Css/jquery-2.1.4.js"></script>
<script>
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function dragOver(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
div {
width:200px;
height:100px;
border:1px solid #aaaaaa;
float:left;
margin:20px;
padding:10px;
}
figure {
clear:both;
}
</style>
</head>
<body>
<aside>
<h2>来回放置图片</h2>
<div id="div1"ondrop="drop(event)" ondragover="dragOver(event)"></div><div id="div2" ondrop="drop(event)" ondragover="dragOver(event)"></div>
<figure>
<figcaption>鲜花</figcaption>
<img id="image" src="Images/ct_html5_canvas_image.gif" alt="image" draggable="true" ondragstart="drag(event)"/>
</figure>
</aside>
</body>
</html>

HTML5拖放(drag和drog)的更多相关文章

  1. HTML5拖放(drag和drog)作品

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. HTML5 拖放---drag和drop

    拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true:  例:<div id="div" draggable="true"&g ...

  3. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  4. HTML5拖放（drag and drop）与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  5. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  6. html5支持drag的拖放排序插件sortable.js

    html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/S ...

  7. HTML5 拖放

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 I ...

  8. HTML5 拖放及排序的简单实现

    HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...

  9. 【Demo】HTML5拖放--简单demo

    用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后-------  实现代码: <!DOCTYPE html> ...

随机推荐

  1. OpenCV入门指南

    http://blog.csdn.net/morewindows/article/details/8225783/ http://blog.csdn.net/poem_qianmo/article/d ...

  2. 渲染路径-实时渲染中常用的几种Rendering Path

    http://www.cnblogs.com/polobymulberry/p/5126892.html?utm_source=tuicool&utm_medium=referral 回到顶部 ...

  3. Android DPAD not enabled in AVD

    问题描述:打开Android的仿真器,右侧的按键部分对于上下左右键出现以下现象后果是,这些按键都没法使用,由于我是测试一个小游戏,俄罗斯方块,朋友,要是少了上下左右键,让我情何以堪,而且我试过使用键盘 ...

  4. uoj#276. 【清华集训2016】汽水（分数规划+点分治）

    传送门 没想到点分治那一层-- 首先不难发现这是个分数规划,先把所有的边长减去\(k\),二分答案,设为\(mid\),就是要求路径平均值\(ans\in[-mid,mid]\) 先来考虑\(ans\ ...

  5. 使用Decimal.js解决前端计算金钱失真问题

    1.加载 $ npm install --save decimal.js 2.页面导入 import {Decimal} from 'decimal.js' 3.使用 // 加法 new Decima ...

  6. Git的使用方法与GitHub项目托管方法

    Git的安装 Windows上安装Git 访问网址:https://git-for-windows.github.io/ 点击Download下载,下载后双击安装包进行安装,一直"下一步&q ...

  7. 【aspnetcore】异常捕捉可用知识点

    1.使用过滤器ExceptionFilter:补充:常用过滤器:AuthorizationFilter.ActionFilter.ResultFilter.ResourceFilter.Excepti ...

  8. Spring的ioc（DI）复习概念和原理简介

    IOC的好处 ioc或者说di的概念很显然了,反转控制和依赖注入,那本来直接new就行的东西,为什么要搞这么复杂呢?? 开发维护方便,高层设计不用依赖底层的,不然底层一个类改下构造器,高层就全要改,因 ...

  9. LVDT

    什么是 LVDT? LVDT 是线性可变差动变压器的缩写. 它是一种常见类型的机电传感器,可将其以机械方式耦合的物体的直线运动转换为对应的电气信号.LVDT 线性位移传感器随时可用,可以测量各种移动, ...

  10. 用vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...