HTML5拖放API

时间：2015-09-13 11:55:43 阅读：208 评论：0 收藏：0 [点我收藏+]

标签：

拖放事件
事件提供了拖放可以控制几乎所有方面的拖放操作。棘手的部分是确定每个事件触发：在拖项目火；别人火下降的目标。拖动项时，以下事件（按照这个顺序）：

拖曳开始
拖
dragend
此刻你把鼠标按钮和开始移动鼠标的拖曳开始，事件触发的项目被拖。光标更改为无滴符号（用线穿过圈），说明该项目不能落在自己。你可以使用ondragstart事件处理程序运行javascript代码拖动开始。

后拖曳开始事件发生时，拖动事件火灾和持续射击只要对象是被拖。这是类似于鼠标移动火灾，也多次作为移动鼠标。当拖动停止（因为你滴项目上无论是有效的或无效的，下降的目标）dragend事件触发。

全部三个项目的目标是把元。默认情况下，浏览器不会在阻力发生变化的拖动元素的外观，所以它是由你来改变外观。大多数浏览器做的，然而，创建一个元素被拖着，总是立即下光标半透明的克隆。

当一个项目被拖到一个有效的拖放目标，按以下顺序发生的事件：

DragEnter
DragOver
dragleave或下降
这个DragEnter事件（类似于鼠标悬停火灾事件）一旦项目被拖到下降的目标。后立即DragEnter火灾的事件，DragOver事件会继续火的项目被拖在下降的目标边界。当拖动项的拖放目标外，DragOver停止射击，dragleave事件被触发（类似mouseout）。如果把项目实际上是下降的目标，而不是下降的事件触发dragleave。这些活动的目标是降低目标元素。

自定义的拖放目标
当你试图拖了无效的下降的目标，你看到一个特殊的光标（用线穿过圈）说明你不能放弃。即使所有的元素都支持拖放目标事件，默认是不允许滴。如果你将一个元素的东西，不让一滴的，滴事件不会触发无论用户行动。然而，你可以将任何元素到一个有效的拖放目标通过重写默认行为的DragEnter和DragOver事件例如，如果你有一个

一个ID元素“droptarget”，你可以使用下面的代码，把它变成一个下降的目标：
<trans data-src="var droptarget = document.getElementById("droptarget");

EventUtil.addHandler(droptarget, "dragover", function(event){
EventUtil.preventDefault(event);
});

EventUtil.addHandler(droptarget, "dragenter", function(event){
EventUtil.preventDefault(event);
});">无功droptarget =文件。getElementById（“droptarget”）；

eventutil。AddHandler（droptarget，“DragOver”，功能（事件）{
eventutil。
preventDefault（事件）；}）；

eventutil。AddHandler（droptarget，“DragEnter”，功能（事件）{
eventutil preventDefault（事件。）；</trans>
经过这些改变，你会注意到光标现在表明下降是允许通过拖放目标当拖动元件。同时，该滴事件将火。

在Firefox 3.5 +，一滴事件的默认行为是浏览的网址，投在下降的目标。这意味着一个图像到下降的目标将导致网页浏览的图像文件，这是落在无效的URL错误放置目标结果的文本。火狐浏览器的支持，你也必须取消掉事件的默认行为来防止这种导航的发生：
<trans data-src="EventUtil.addHandler(droptarget, "drop", function(event){
EventUtil.preventDefault(event);
});">eventutil。AddHandler（droptarget，“滴”，功能（事件）{
eventutil。preventDefault（事件）；
}）；</trans>
数据传输对象
简单地拖拽没有任何用处的数据实际上是被影响。有助于通过拖放操作数据的传输，Internet Explorer 5介绍数据传输对象，作为财产而存在事件是用于字符串数据从拖项目转移到下降的目标。因为它是一个属性事件，的数据传输对象不存在，除了在一个拖放事件的事件处理程序的适用范围。在一个事件处理程序，您可以使用对象的属性和方法来使用拖放功能。这个数据传输对象现在对HTML5的工作草案的一部分。

这个数据传输对象有两个主要方法：getdata()和setdata()。正如你可能想到的，getdata()能够读取一个值的存储setdata()。第一个参数为setdata()，和唯一的争论getdata()，是一个字符串表示的数据集的类型：要么“文本”或“URL”，如下所示：

<trans data-src="//working with text
event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");

//working with a URL
event.dataTransfer.setData("URL", "http://www.00h5.com/");
var url = event.dataTransfer.getData("URL");">/ /文本
事件工作。数据传输。SetData（“文本”，“文本”）；
var text =事件。数据传输。GetData（“文本”）；
/工作与
URL
事件。数据传输。SetData（“url”，“HTTP：/ / www.00h5 COM。/“）；
var url =事件。GetData（数据传输；</trans>
虽然Internet Explorer开始引入“文本”和“URL”为有效的数据类型，HTML5将允许任何MIME类型来指定。价值观“文本”和“URL”将支持HTML5为向后兼容性，但它们映射到“文字/平原”和“文本/ URI列表”。

这个数据传输对象可以包含一个值的每个MIME类型，这意味着你可以存储文本，同时也没有重写URL。存储在数据数据传输可直到滴事件。如果你不能在检索数据产品事件处理程序，该数据传输对象被破坏、数据丢失。

当您将文本从一个文本框，浏览器调用setdata()在拖动文本存储“文本”格式同样，当一个链接或图像拖，setdata()所谓的URL存储。它是可能的检索这些值数据时，落在一个目标使用getdata()。你也可以叫setdata()手动在拖曳开始事件存储，你可能想要检索后的自定义数据。

这两者之间是有区别的数据视为文本和数据作为一个URL。当你指定将数据存储为文本，它没有任何特殊待遇。当你指定将数据存储为一个URL，然而，它就像对待网页上的链接，这意味着如果你放它到另一个浏览器，浏览器将定位到URL。

Firefox 5版本不正确通过别名“URL”以“文本/ URI列表”或“文本”以“文字/平原”。它，然而，别名“文本”（大写字母T）来“文字/平原”。用于从数据检索数据最好的跨浏览器兼容性，你需要检查的网址和使用两个值“文本”纯文本：

<trans data-src="var dataTransfer = event.dataTransfer;

//read a URL
var url = dataTransfer.getData("url") ||dataTransfer.getData("text/uri-list");

//read text
var text = dataTransfer.getData("Text");">数据传输数据传输；var =事件。

/读取URL
var url =数据传输。GetData（URL）| |数据传输。GetData（“文本/ URI列表”）；

/阅读文本
var text = GetData（数据传输；</trans>
，缩短数据名称首先是很重要的，因为通过10版不支持扩展名和Internet Explorer也抛出一个错误时，数据的名字不认可。

dropeffect和effectallowed
这个数据传输对象可以用来做更多的不是简单地传输数据来回；它也可以被用来确定什么类型的行为可以通过拖动和拖放目标项目。你通过两个属性：dropeffect和effectallowed。

这个dropeffect属性是用来证明这种下降行为允许浏览器。这个属性有以下四种可能的值：

“不”-拖动项目不能扔在这里。这是除了文本框的默认值。
“移动”-拖动项应移到下降的目标。
“复制”-拖动项目应该复制到放置目标。
“链接”-表示下降的目标将定位到拖放的项（如果它是一个网址）。
这些价值观会导致不同的光标显示拖动项时，在下降的目标。它是你的，但是，实际上导致行动光标所指示。换句话说，没有什么是自动移动，复制，或联系没有你的直接干预。你唯一得到的自由是指针的变化。为了使用dropeffect属性，你必须把它在ondragenter事件处理程序的拖放目标。

这个dropeffect属性是无用的，除非你也设置effectallowed。此属性指示dropeffect允许拖动的项。可能的值如下：

“初始化”没有行动已经设置为拖动的项。
“不”没有行动是在拖项目允许。
“复制”只有“复制”是允许的。
“链接”只有“链接”是允许的。
“移动”只有“动”是允许的。
“复制链接”“复制”和“链接”是允许的。
“copymove”“复制”和“移动”是允许的。
“linkmove”“链接”和“动”是允许的。
“所有”所有的值是不允许的。
此属性必须设置ondragstart事件处理程序内的。

假设你想让一个用户来移动文本从一个文本框中插入

。要做到这一点，你必须设置dropeffect和effectallowed以“移动”。文本不会自动移动本身，因为在一个下降的事件的默认行为
是什么也不做。如果你重写默认行为，文字会自动从文本框删除。然后，你把它插入到
要完成这个动作。如果你改变了dropeffect和effectallowed以“复制”，文本框中的文本不会自动被删除。
注：Firefox通过5版有问题effectallowed在下降的事件可能不会发生火灾时该值设置代码。

draggability
默认情况下，图像，链接，和文本拖动，这意味着没有额外的代码来允许用户开始拖动它们是必要的。只有经过一段文本拖动已经凸显，而图像和链接可以被在任何时间点。

它有可能使其他元素拖动。HTML5的所有HTML元素指定指示拖动财产如果元素可以拖。图像和链接拖动自动设置为true，而一切虚假的默认值。这个属性可以设置为允许其他元素被拖动或确保图像或链接不会拖动。例如：

<trans data-src="<!"><！</trans><trans data-src="-- turn off dragging for this image -->
<img src="smile.gif" draggable="false" alt="Smiley face">

<!">——关闭——>拖动这个形象
< IMG src=“微笑。GIF”拖动=“假”alt=“笑脸”>

<！</trans><trans data-src="-- turn on dragging for this element -->
<div draggable="true">...</div>">——打开拖动这个元素——>
＜div拖动=“真”>……< / DIV ></trans>
可拖动的属性是在Internet Explorer 10 + 4 +支持，Firefox，Safari 5 +，和铬。京剧，作为11.5版本，不支持HTML5拖放。为了让火狐启动阻力，你必须添加一个ondragstart事件处理程序集的一些信息在数据传输对象。

注意：Internet Explorer 9和更早的让你做出任何元素拖动通过调用dragdrop()在它的方法鼠标按下事件Safari 4和早期需要一个CSS风格的加入- KHTML用户拖动：元让一个元素拖动。

额外的成员
HTML5规范的表明在附加的方法数据传输目标

addElement（元）-添加一个元素的拖动操作。这是纯粹的数据而不影响外观的拖动操作。为写这篇文章的时候，没有浏览器实现了这种方法。
cleardata（格式）清除存储特定格式的数据。这是在Internet Explorer中实现，Firefox 3.5 +，Chrome，Safari 4 +。
setdragimage（元，x，y）-允许您指定要显示在鼠标的拖动发生图像。该方法接受三个参数：一个HTML元素的X和Y坐标的显示和图像上的光标所在的位置应。的HTML元素可以是一个图像，在这种情况下，图像显示，或任何其他元素，在这种情况下，一个渲染的元素显示。Firefox 3.5，Safari 4 +，和Chrome都支持这种方法。
类型一列数据类型正在存储。这一集就像一个数组存储的数据类型为字符串，如“文本”。Internet Explorer 10 +，Firefox 3.5 +，和Chrome实现这个属性。转载请著名出处：零零H5网http://www.00h5.com/

HTML5拖放API

标签：

原文地址：http://www.cnblogs.com/00h5/p/4804198.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行