HTML5拖放

原创 2015年11月19日 20:37:28
所用例子在触屏设备无效
抓取一个对象后拖到另外一个位置
浏览器支持(ie9  ff  opera12  chrome  safari5)
safari5.1.2不支持拖放

设置draggable为true  让目标能被拖动

事件
1拖动元素时
a.dragstart-鼠标移入目标元素按下左键触发
b.drag-dargstart触发后移动鼠标连续触发该事件(类似mousemove事件)
c.gragend-拖动停止时触发    无论现在处于拖动的有效位置还是无效位置

2当元素被拖动到一个有效的防治目标上时,触发下列事件(该阶段的事件目标—即target或者srcElement都是这个目标元素)
a.dragenter-只要有元素被拖动到放置目标上,就触发dragenter事件(类似mouseover)
b.dragover-触发dragenter后在有效目标范围内移动式连续触发该事件
c.dragleave-被拖动元素从目标范围内被拖出目标范围外时触发
d.drop-被拖动元素被放置到了目标范围内(即在有效目标范围内松动鼠标左键)

attention dragleave and drop 只能支出二者其一
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true :

<img draggable="true" />

拖动什么 - ondragstart 和 setData()

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
a 方法设置被拖数据的数据类型和值:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}                                                                                             
数据类型为text

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式

这要通过调用 ondragover 事件的 event.preventDefault() 方法:

event.preventDefault()

进行放置 - ondrop

当放置被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,drop(event):

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

代码解释:

  • 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素(目标元素)中
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
<!--在目标范围内连续触发事件-->
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
<!--在鼠标移入目标元素按下左键后触发-->
function drop(ev)
{
ev.preventDefault();
//避免浏览器对数据的默认处理方式
var data=ev.dataTransfer.getData("Text");
//得到被拖的数据
ev.target.appendChild(document.getElementById(data));
//把目标数据插入到区域中(target)
}
<!--被拖动物品到达目标范围内被触发-->
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<!--ondrop被拖动物品到达目标范围内被触发-->
     <img src="image/test.jpg" width="80" height="30" draggable="true" ondragstart="drag(event)" id="drag1" />
<!--ondragover在目标范围内连续触发事件-->
<!--ondragstart在鼠标移入目标元素按下左键后触发-->
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<!--放置被拖放物品的空间-->
</div>

</body>
</html>

<!--这里用到了dragstart,drop,dropover-->


可以相互拖动
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#fruite{
    width:1000px;
    height:200px;
    margin:20px auto;
    border:1px solid #000;
    }
#blanket{
    width:1000px;
    height:200px;
    margin:20px auto;
    border:1px solid #000;
    }
</style>
<script type="text/javascript">
function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id)
    }
function allowdrag(ev){
    ev.preventDefault();
    }
function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text",ev.target.id);
    ev.target.appendChild(document.getElementById(data));
    }
</script>
<meta charset="utf-8">
<title>水果分类</title>
</head>
<body>
<div id="fruite" ondrop="drop(event)" ondragover="allowdrag(event)">
    <img id="img1" src="image/daquan.jpg" ondragstart="drag(event)" draggable="true" width="200" height="100">
    <img id="img2" src="image/fupenzi.jpg" ondragstart="drag(event)" draggable="true" width="200" height="100">
    <img id="img3" src="image/taohua.jpg" ondragstart="drag(event)" draggable="true" width="200" height="100">
</div>
<div id="blanket" ondrop="drop(event)" ondragover="allowdrag(event)">
<!--这里放置被拖动的水果-->
</div>
</body>
</html>


深入理解html5拖放

最早在网页中引入JavaScript拖放功能是IE4。当时,网页中只有两种对象可以拖放:图像和某些文本。拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它。拖放文本时,要先选中文本,然后可以像拖放...
  • u013344815
  • u013344815
  • 2016年03月23日 22:27
  • 697

HTML5 拖放事件 案例

.one{ width: 400px; height: 400px; border: 1px solid #000; ...
  • u011301203
  • u011301203
  • 2016年11月10日 22:34
  • 526

HTML5之拖放属性实现图片的拖放

HTML5中实现拖放操作,至少经过如下步骤       1)设置被拖放对象元素的draggable属性设置为true       2)编写与拖放有关的事件处理代码 事件 产生事...
  • u010359143
  • u010359143
  • 2015年12月30日 11:24
  • 1042

HTML5——本地资源拖放

HTML5本地资源拖放 lang="en"> charset="UTF-8"> 本地拖放 #imgContainer{ backgroun...
  • tangxiaolang101
  • tangxiaolang101
  • 2016年05月06日 10:23
  • 334

如何使用HTML5进行文件拖放

实现将文件从桌面直接拖放到浏览器中是web应用开发的终极目标之一,本文作为接下来四篇文章的第一篇将解决以下问题: 1.实现将一个文件拖放到一个页面元素上 2.在JavaScript中分析拖放的...
  • goitcast
  • goitcast
  • 2012年08月27日 09:13
  • 1767

HTML5--拖拽API(含超经典例子)

一、关于拖拽API 拖拽API是HTML5的新特性,相对于其他新特性来说,重要程度占到6成,实际开发中使用比例占到3成,学习要求个人认为是达到掌握即可的程度。 二、什么是拖拽和释放? 拖...
  • baidu_25343343
  • baidu_25343343
  • 2016年11月18日 13:08
  • 15819

HTML5中新增的文件API和拖拽API详解

文件API 在HTML5之前的,从网页上传文件一次只能上传一个文件,而且也无法对要上传的文件做更深一步的操作。 HTML5提供了一个系列关于文件操在的API,通过使用这些API,对于从W...
  • u012468376
  • u012468376
  • 2017年02月12日 15:12
  • 1742

html5篇——拖放(Drag和Drop)

好久没有更新html5了,继续更新html5,今天更新html5的拖放功能。 拖放,就是抓取一个对象后拖放到另一个位置。很常用的一个功能,在html5中,任何元素都能够拖放。 浏览器支持 Inter...
  • u010556394
  • u010556394
  • 2016年05月30日 17:23
  • 1391

HTML5拖放事件

拖放是在“拖放源”和“拖放目标”之间传输数据的用户界面,它可以存在相同应用之间也可以是不同应用之间。 拖放源:任何有HTML draggable属性的文档元素都是拖放源。 拖放目标:任何文档都可以是...
  • u012729094
  • u012729094
  • 2016年05月05日 14:28
  • 1646

html5对图像的拖放问题的简单分析

在HTML5的中新特性,关于对拖放的的简单的使用。怎样完成一个拖放到问题,在这个过程中我们应该注意怎样的问题。我们知道拖放可以分解为这样的几个步骤:元素是否可以进行拖放,拖放到 是什么,开始拖放,拖动...
  • datouniao1
  • datouniao1
  • 2015年08月09日 17:39
  • 432
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5拖放
举报原因:
原因补充:

(最多只允许输入30个字)