让拖放变的流行起来,详解与实例代码

HTML5 — 让拖放变的流行起来

2015/12/29 · HTML5 · 4
评论 ·
拖放

初稿出处: 韩子迟   

先上 Demo,尽量用
chrome,代码可参考
Github。

在 HTML5 现身在此以前,页面成分的拖放必要监听 mousedown、mouseover 以及
mouseup 等一层层事件,然后改变成分的相对地点来促成这一功用。HTML
DnD(Drag-and-Drop)API 的产出,使得拖放变的不难。然则由于 DnD
尚处在草案阶段,各浏览器对其规范并未统一,某些事件在分歧浏览器中会出现不一样成效。

要运用
DnD,须求肯定两件业务,一是急需拖动的要素,二是可放置拖动成分的地方。拖放无非是将成分从贰个岗位拖到另3个岗位。

在 HTML5 出现以前,页面成分的拖放需求监听
mousedown、mouseover 以及 mouseup
等一多级事件,然后改成元素的相持地点来贯彻这一作用。HTML
DnD(Drag-and-Drop)API 的面世,使得拖放变的简练。可是出于 DnD
尚处在草案阶段,各浏览器对其正式并未统一,有个别事件在分裂浏览器中会现身差异效能。

HTML5 拖放(Drag 和 Drop)详解与实例代码,html5drag

简介

拖放是一种普遍的性状,即抓取对象将来拖到另一个地点。

在 HTML5 中,拖放是正规的一有的,任何因素都能够拖放。

先点击二个小例子:在用户伊始拖动 <p> 成分时进行 JavaScript

<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>

升迁: 链接和图表私下认可是可拖动的,不必要 draggable 属性。

概念和用法

在拖放的历程中会触发之下事件:

  • 在拖动目的上接触事件 (源成分):  ondragstart – 用户开始拖动元素时接触
    • ondrag – 成分正在拖动时接触
    • ondragend – 用户完毕元素拖动后触发
  • 获释指标时接触的轩然大波:  ondragenter –
    当被鼠标拖动的靶子进入其容器范围内时触发此事件

    • ondragover –
      当某被拖动的靶子在另一对象容器范围内拖动时触发此事件
    • ondragleave – 当被鼠标拖动的对象离开其容器范围内时触发此事件
    • ondrop – 在2个拖动进度中,释放鼠标键时触发此事件

浏览器补助

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 帮忙拖动。

小心:Safari 5.1.2不支持拖动;在拖动元素时,每隔 350 飞秒会触发
ondragover 事件。

实例

先贴代码,再逐一解释:

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">

<script>
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>
</body>
</html>

拖拽前的页面效果为:

 皇家赌场手机版 1

上面分别来分析下方面代码的意味。

设置成分可拖放

先是,为了使成分可拖动,把 draggable 属性设置为 true :

<img draggable="true">

拖动什么 – ondragstart 和 setData()

下一场,规定当成分被拖动时,会生出怎么样。

在下面的事例中,ondragstart
属性调用了二个函数,drag(event),它规定了被拖动的数目。

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

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

在那么些事例中,数据类型是 “Text”,值是可拖动元素的 id (“drag1”)。

置于何地 – 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”)
  • 把被拖成分追加到放置成分(目的成分)中

金玉满堂的结果如图:

皇家赌场手机版 2 

dataTransfer对象

在拖曳操作的经过中,大家能够用过dataTransfer对象来传输数据,以便在拖曳操作甘休的时候对数码举行任何的操作。

对象属性:

  • dropEffect:设置或重回拖放目的上同意发生的拖放行为。就算那里安装的拖放行为不再effectAllowed属性设置的有余拖放行为之内,拖放操作将会破产。该属性值只同意为“null”、“copy”、“link”和“move”四值之一。
  • 让拖放变的流行起来,详解与实例代码。effectAllowed:设置或回到被拖动成分允许爆发的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
  • items:该属性重回DataTransferItems对象,该目的表示了拖动数据。
  • types:该属性重回叁个DOMStringList对象,该对象包蕴了存入dataTransfer中数量的有着品种。

指标方法:

  • setData(format,data):将点名格式的数据赋值给dataTransfer对象,参数format定义数据的格式也正是数码的体系,data为待赋值的数目
  • getData(format):从dataTransfer对象中获取钦点格式的多少,format代表数量格式,data为数量。
  • clearData([format]):从dataTransfer对象中删去内定格式的数码,参数可选,若不交付,则为除去对象中装有的数额。
  • addElement(element):添加自定义图标
  • setDragImage(element,x,y):设置拖放操作的自定义图标。当中element设置自定义图标,x设置图标与鼠标在档次方向上的离开,y设置图标与鼠标在笔直方向上的偏离。

Identify what is draggable

function dragstart_handler(ev) {
 console.log("dragStart");
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

<body>
 <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
</body>

Define the drag’s data

function dragstart_handler(ev) {
  // Add the drag data
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}

让拖放变的流行起来,详解与实例代码。Define the drag image

function dragstart_handler(ev) {
  // Create an image and then use it for the drag image.
  // NOTE: change "example.gif" to an existing image or the image 
  // will not be created and the default drag image will be used.
  var img = new Image(); 
  img.src = 'example.gif'; 
  ev.dataTransfer.setDragImage(img, 10, 10);
}

Define the drag effect

function dragstart_handler(ev) {
  // Set the drag effect to copy
  ev.dataTransfer.dropEffect = "copy";
}

Define a drop zone

function dragover_handler(ev) {
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
<body>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>

火狐浏览器拖拽难题

不过进展到那儿在火狐浏览器中发现2个题目:

html5的拖拽,用了preventDefault幸免弹出新页面,但在火狐下不可行?

化解办法:

document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
} 

要么对于地点的实例中,添加到ondrop方法里面也是能够的:

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

以上就是本文的全部内容,希望对大家的上学抱有支持,也盼望我们多多帮助帮客之家。

拖放(Drag 和
Drop)详解与实例代码,html5drag 简介
拖放是一种普遍的特征,即抓取对象现在拖到另3个任务。 在 HTML5中,拖放是标准…

简介

拖放是一种普遍的风味,即抓取对象以后拖到另一个任务。

在 HTML5 中,拖放是专业的一有个别,任何因素都能够拖放。

先点击三个小例子:在用户开端拖动 <p> 成分时进行 JavaScript

<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>

提示: 链接和图纸暗许是可拖动的,不须要 draggable 属性。

Drag


首先大家要求钦定要拖动的成分,设置格局很不难,给该 DOM 成分设置
draggable 属性,属性值设置为 true。比如那样:

<code> <img src=”images/0.jpg” draggable=”true” id=”img0″/>
</code>

1
2
3
<code>
  <img src="images/0.jpg" draggable="true" id="img0"/>
</code>

实则,以上代码见怪不怪了,页面中的图片(img)、链接(带 href 的 a
标签)以及文本暗许即为可拖动。为了统一,最好还是都抬高该 draggable
属性为好。

draggable 属性还有七个值,分别是 falseauto,顾名思义,false
即设置为不可拖动,auto 即为浏览器暗许值。

当大家左键点击(按下)可拖动的 DOM 成分,轻轻移动,即触发 ondragstart
事件,该事件只会触发3次。常常我们会在 ondragstart
事件中记录正在被拖动的因素音讯(ondrop 的时候好对其展开处理)。比如 demo
中记录了正在被拖动的成分 id:

for (var i = lis.length; i–; ) { lis[i].ondragstart = function(e) {
e.dataTransfer.setData(‘id’, e.target.id); }; }

1
2
3
4
5
for (var i = lis.length; i–; ) {
  lis[i].ondragstart = function(e) {
    e.dataTransfer.setData(‘id’, e.target.id);
  };
}

ondragstart 事件触发后,直到拖放事件甘休,会直接触发 ondrag 事件。

要运用
DnD,要求分明两件业务,一是亟需拖动的要素,二是可放置拖动成分的地点。拖放无非是将成分从贰个岗位拖到另三个岗位。

概念和用法

在拖放的历程中会触发之下事件:

  • 在拖动目的上接触事件 (源元素):
    • ondragstart – 用户开首拖动成分时接触
    • ondrag – 成分正在拖动时接触
    • ondragend – 用户完结成分拖动后触发

  • 放出目的时接触的事件:
    • ondragenter – 当被鼠标拖动的靶子进入其容器范围内时触发此事件
    • ondragover –
      当某被拖动的靶子在另一对象容器范围内拖动时触发此事件
    • ondragleave – 当被鼠标拖动的靶子离开其容器范围内时触发此事件
    • ondrop – 在三个拖动进程中,释放鼠标键时触发此事件

Drop


说不上大家必要肯定被拖动成分可停放的职位,ondragover
事件规定在何地放置被拖动的多少。
默许地,不可能将成分放置到其余因素中,假使必要安装允许放置,大家亟须遏止对成分的暗中认可处理方式:

var dus = document.querySelector(‘.dustbin’); dus.ondragover =
function(e) { e.preventDefault(); };

1
2
3
4
5
var dus = document.querySelector(‘.dustbin’);
 
dus.ondragover = function(e) {
  e.preventDefault();
};

当成分被拖动到某一要素上时,即会接触后者的 ondrop
事件,假若急需科学触发 ondrop 事件,还必要撤废一些 DnD
事件的暗许行为:

dus.ondrop = function(e) { // 调用 preventDefault()
来防止浏览器对数码的暗中认可处理(drop 事件的默许行为是以链接情势打开)
e.preventDefault(); e.stopPropagation(); // 包容ff var id =
e.dataTransfer.getData(‘id’) , node = document.getElementById(id);
node.parentNode.removeChild(node); };

1
2
3
4
5
6
7
8
9
10
dus.ondrop = function(e) {
  // 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
  e.preventDefault();
  e.stopPropagation(); // 兼容ff
 
  var id = e.dataTransfer.getData(‘id’)
    , node = document.getElementById(id);
 
  node.parentNode.removeChild(node);
};

多少文献中说要注销 ondragenter()
事件的默许行为,楼主在实际操作中并未发现这一点。

Drag

 浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 扶助拖动。

注意:Safari 5.1.2不援救拖动;在拖动成分时,每隔 350 微秒会触发
ondragover 事件。

事件


地点已经涉及了 DnD 中的四个事件,dragstartdragover 以及
drop,其实 DnD 还有多少个事件,它们的发生顺序是:

dragstart(drag元素) -> drag(drag元素) -> dragenter(drop元素) ->
dragover(drop元素) -> dragleave(drop元素) -> drop(drop元素) ->
dragend(drag元素)

1
dragstart(drag元素) -> drag(drag元素) -> dragenter(drop元素) -> dragover(drop元素) -> dragleave(drop元素) -> drop(drop元素) -> dragend(drag元素)

不难掌握,拖放事件始于时触发 ondragstart
事件,当被拖动成分进入可放置的因素时,触发 ondragenter 事件(ondragenter
并不是在七个要素相交时即触发,而是该被拖拽成分在目的成分上活动一段时间后才触发),之后一段事件会不停触发
ondragover 事件(可参考
mouseover),当被拖动成分离开可停放成分的一念之差,触发 ondragleave(和
ondragenter 对应)
事件,当放手鼠标并且被拖拽成分正幸亏可停放成分上时,触发 ondrop
事件,当拖放事件结束时,触发 ondragend(和 ondragstart 对应)
事件,无论拖放操作是或不是成功,均会触发该事件。

率先大家必要钦定要拖动的因素,设置方法很不难,给该 DOM 元素设置
draggable 属性,属性值设置为 true。比如那样:

实例

先贴代码,再逐一诠释:

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">

<script>
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>
</body>
</html>

拖拽前的页面效果为:

皇家赌场手机版 3

下边分别来分析下方面代码的意趣。

dataTransfer


拖动进程中,回调函数接受的事件参数,有一个 dataTransfer
属性。它指向贰个指标,包罗了与拖动相关的各类音信。

dataTransfer 对象首要有三种形式:getData() 和
setData(),供给注意的是,只有在 dragstart 以及 drop
事件中接纳这些主意。简单想象,getData() 能够取得由 setData()
保存的值。setData() 方法的首先个参数,也是 getData()
方法唯一的一个参数,是个字符串,表示保留的数据类型,取值为 ‘text’ 或
‘U中华VL’。IE 只定义了 ‘text’ 和 ‘UCRUISERL’ 三种有效的数据类型,而 HTML5
则对此加以扩充,允许钦点各个 MIME 类型。

在拖动文本框中的文本时,浏览器会自行调用 setData() 方法,将拖动的文书以
‘text’ 格式保存在 dataTransfer
对象中,类似地,在拖放链接也许图像时,会自行调用 setData() 将 U福睿斯L
新闻保存,假如有需要,在 drop 事件中可以用 getData()
读取浏览器保存的值。

可是这不啻并没有怎么卵用,大家在实际开销中山大学部分依然对 DOM
的操作,于是多数境况下大家在 dragstart 事件处理程序中调用
setData(),手工业保存自个儿要传输的数目,然后在 drop 事件中读取,有点像
jQuery 的 data 事件。

<img src=”images/0.jpg” draggable=”true” id=”img0″/>

设置成分可拖放

先是,为了使成分可拖动,把 draggable 属性设置为 true :

<img draggable="true">

dropEffect 与 effectAllowed


dropEffecteffectAllowed 是前边说的 dataTransfer
对象的多个属性,有吗用?不难地说,有四个用处,一是足以设置元素被拖拽时的鼠标准样品式,二是可以安装成分是不是可被放置。

这里自个儿测试了两款浏览器,chrome、ff 以及 uc,chrome 和 uc 表现一般。

相似我们将元素脱离原来的地方,平底足势会成为
“禁手”,直到成分被拖到可停放区域上。

皇家赌场手机版 4

不过 ff 不然,在 ff 中,成分在拖动的长河中不会来得 “禁手”。

当成分被拖到可停放区域上时,私下认可坐骨神经痛势如下。

皇家赌场手机版 5

实在通过设置 dropEffecteffectAllowed
总共能设置三种肩周炎势(move, copy,以及 link),分别如下(move
和默许貌似一样):

皇家赌场手机版 6

需要在 ondragstart 方法中装置 effectAllowed,在 ondragover
方法中安装 dropEffect。具体能够参照 demo代码。

咱俩也得以对 dropEffect 和 effectAllowed 的值进行设定,让某 drop
成分只好放 move 成分,也许 copy
成分等。具体能够看下这篇,HTML5魔法堂:周详驾驭Drag & Drop
API,讲的很好。取值也足以参考高程
484 页。

一言以蔽之要驾驭的是,DnD 并不会帮您做到 copy 或然 move
的其余操作,而是需求用户在 DnD 进度中,记录供给操作的对象音信,然后在
drop 事件中成就 copy 大概 move 等的操作。

实在,以上代码见怪不怪了,页面中的图片(img)、链接(带 href 的 a
标签)以及文本暗中认可即为可拖动。为了统一,最好依然都添加该 draggable
属性为好。draggable 属性还有多少个值,分别是 false 和
auto,顾名思义,false 即设置为不可拖动,auto 即为浏览器暗中同意值。

拖动什么 – ondragstart 和 setData()

下一场,规定当成分被拖动时,会发出什么。

在上头的例子中,ondragstart
属性调用了2个函数,drag(event),它规定了被拖动的数额。

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

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

在这些例子中,数据类型是 “Text”,值是可拖动成分的 id (“drag1”)。

Tricks


还有多少个执行进程中发觉的题材。

将 Demo 在 ff
中开辟,图片拖到空处,会活动在新标签中开拓图片,固然自个儿曾经在各样风云中增加了
preventDefault(),尚不清楚原因。

若是可拖拽元素,起初在二个可放置成分内部,先把成分拖出去,再放回来,将会触发
ondrop 事件,可是 e.target 却是被拖拽的成分。就算放置在别的因素,target
会指向被停放的因素,而不是拖拽成分。那点能够因此判断 target
成分获得化解。关于那点能够看下 w3cschool 的这几个
demo,打开控制台,将图片拖出去,再拖回来,控制台会打字与印刷出荒唐,鲜明代码没有考虑到那一点。


Read More:

  • HTML 5
    拖放
  • HTML5魔法堂:周详掌握Drag & Drop
    API
  • HTML5 拖放API
  • HTML5拖放操作API及实例

    1 赞 6 收藏 4
    评论

皇家赌场手机版 7

当大家左键点击(按下)可拖动的 DOM 成分,轻轻移动,即触发 ondragstart
事件,该事件只会接触一回。经常我们会在 ondragstart
事件中著录正在被拖动的要素消息(ondrop 的时候好对其开始展览拍卖)。比如 demo
中著录了正在被拖动的因素 id:

放到哪儿 – ondragover

ondragover 事件规定在何地放置被拖动的多寡。

暗许地,不恐怕将数据/成分放置到别的因素中。固然急需设置允许放置,大家务必遏止对元素的暗许处理情势。

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

event.preventDefault()

for (var i = lis.length; i–; ) {
lis[i].ondragstart = function(e) {
e.dataTransfer.setData(‘id’, e.target.id);
};
}

展开停放 – 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”)
  • 把被拖成分追加到放置成分(目的成分)中

贯彻的结果如图:

皇家赌场手机版 8

      ondragstart 事件触发后,直到拖放事件结束,会一贯触发 ondrag 事件。

dataTransfer对象

在拖曳操作的长河中,我们得以用过dataTransfer对象来传输数据,以便在拖曳操作截至的时候对数码举行别的的操作。

Drop

对象属性:

  • dropEffect:设置或重回拖放指标上同意发生的拖放行为。若是那里安装的拖放行为不再effectAllowed属性设置的有余拖放行为之内,拖放操作将会破产。该属性值只同意为“null”、“copy”、“link”和“move”四值之一。

  • effectAllowed:设置或回到被拖动成分允许产生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。

  • items:该属性再次来到DataTransferItems对象,该目的表示了拖动数据。

  • types:该属性再次来到2个DOMStringList对象,该目的包蕴了存入dataTransfer中数据的富有类型。

其次大家要求精通被拖动元素可放置的岗位,ondragover
事件规定在哪个地方放置被拖动的数码。
暗中同意地,不或者将成分放置到此外因素中,如若要求设置允许放置,我们亟须遏止对元素的暗中同意处理方式:

目的方法:

  • setData(format,data):将钦定格式的数据赋值给dataTransfer对象,参数format定义数据的格式相当于多少的门类,data为待赋值的数目

  • getData(format):从dataTransfer对象中获取钦点格式的多寡,format代表数量格式,data为数量。

  • clearData([format]):从dataTransfer对象中去除内定格式的数码,参数可选,若不付出,则为除去对象中装有的数额。

  • addElement(element):添加自定义图标

  • setDragImage(element,x,y):设置拖放操作的自定义图标。当中element设置自定义图标,x设置图标与鼠标在档次方向上的距离,y设置图标与鼠标在笔直方向上的离开。

var dus = document.querySelector(‘.dustbin’);

Identify what is draggable

function dragstart_handler(ev) {
 console.log("dragStart");
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

<body>
 <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
</body>

dus.ondragover = function(e) {
e.preventDefault();
};

Define the drag’s data

function dragstart_handler(ev) {
  // Add the drag data
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}

当成分被拖动到某一因素上时,即会接触后者的 ondrop 事件,假诺急需科学触发
ondrop 事件,还亟需撤销一些 DnD 事件的默许行为:

Define the drag image

function dragstart_handler(ev) {
  // Create an image and then use it for the drag image.
  // NOTE: change "example.gif" to an existing image or the image 
  // will not be created and the default drag image will be used.
  var img = new Image(); 
  img.src = 'example.gif'; 
  ev.dataTransfer.setDragImage(img, 10, 10);
}

dus.ondrop = function(e) {
// 调用 preventDefault() 来制止浏览器对数码的私下认可处理(drop
事件的暗中同意行为是以链接情势打开)
e.preventDefault();
e.stopPropagation(); // 兼容ff

Define the drag effect

function dragstart_handler(ev) {
  // Set the drag effect to copy
  ev.dataTransfer.dropEffect = "copy";
}

var id = e.dataTransfer.getData(‘id’)
, node = document.getElementById(id);

Define a drop zone

function dragover_handler(ev) {
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
<body>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>

node.parentNode.removeChild(node);
};

火狐浏览器拖拽难点

不过进展到此刻在火狐浏览器中发现二个标题:

html5的拖拽,用了preventDefault防止弹出新页面,但在火狐下不中用?

化解办法:

document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
} 

抑或对于地方的实例中,添加到ondrop方法里面也是能够的:

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

稍许文献中说要吊销 ondragenter()
事件的暗许行为,楼主在实操中绝非发现这一点。

参考

HTML Drag and Drop
API
DataTransfer

 

事件

上边已经涉嫌了 DnD 中的多个事件,dragstart、dragover 以及 drop,其实 DnD
还有多少个事件,它们的爆发顺序是:

dragstart(drag元素) -> drag(drag元素) -> dragenter(drop元素) ->
dragover(drop元素) -> dragleave(drop元素) -> drop(drop元素) ->
dragend(drag元素)

简单通晓,拖放事件始于时触发 ondragstart
事件,当被拖动成分进入可停放的因素时,触发 ondragenter 事件(ondragenter
并不是在多少个要素相交时即触发,而是该被拖拽成分在对象成分上移步一段时间后才触发),之后一段事件会持续触发
ondragover 事件(可参考
mouseover),当被拖动成分离开可放置元素的弹指,触发 ondragleave(和
ondragenter 对应) 事件,当松手鼠标并且
被拖拽成分正幸亏可放置成分上时,触发 ondrop 事件,当拖放事件停止时,触发
ondragend(和 ondragstart 对应)
事件,无论拖放操作是不是中标,均会触发该事件。

dataTransfer

拖动进度中,回调函数接受的事件参数,有二个 dataTransfer
属性。它指向3个对象,蕴涵了与拖动相关的各种音讯。

dataTransfer 对象主要有三种办法:getData() 和
setData(),必要小心的是,唯有在 dragstart 以及 drop
事件中采用那七个格局。简单想象,getData() 能够取得由 setData()
保存的值。
setData() 方法的首先个参数,也是 getData()
方法唯一的3个参数,是个字符串,表示保留的数据类型,取值为 ‘text’ 或
‘U陆风X8L’。IE 只定义了 ‘text’ 和 ‘U奥迪Q5L’ 三种有效的数据类型, 而 HTML5
则对此加以扩张,允许内定各样 MIME 类型。

在拖动文本框中的文本时,浏览器会自行调用 setData() 方法,将拖动的文书以
‘text’ 格式保存在 dataTransfer
对象中,类似地,在拖放链接恐怕图像时,会活动调用 setData() 将 U揽胜极光L 信息保存,假使有须求,在 drop 事件中得以用 getData() 读取浏览器保存的值。

不过那犹如并没有怎么卵用,大家在实质上付出中山高校部分依然对 DOM
的操作,于是多数情形下大家在 dragstart 事件处理程序中调用
setData(),手工业保存自个儿要传输的多少,然后在 drop 事件中读取, 有点像
jQuery 的 data 事件。

dropEffect 与 effectAllowed

dropEffect 和 effectAllowed 是后边说的 dataTransfer
对象的五个属性,有吗用?简单地说,有多少个用处,一是能够设置成分被拖拽时的鼠标准样品式,二是足以安装成分是或不是可被停放。

此地小编测试了四款浏览器,chrome、ff 以及 uc,chrome 和 uc 表现一般。

诚如大家将成分脱离原来的职位,坐骨神经痛势会变成
“禁手”,直到成分被拖到可放置区域上。

唯独 ff 不然,在 ff 中,成分在拖动的经过中不会显得 “禁手”。

当成分被拖到可停放区域上时,暗许腰椎间盘突出势如下。

实际通过设置 dropEffect 和 effectAllowed 总共能安装二种复发性风湿病势(move,
copy,以及 link),分别如下(move 和暗许貌似一样):

亟待在 ondragstart 方法中设置 effectAllowed,在 ondragover 方法中设置
dropEffect。具体能够参见 demo代码。

小编们也得以对 dropEffect 和 effectAllowed 的值实行设定,让某 drop
成分只可以放 move 成分,只怕 copy
成分等。具体能够看下这篇,HTML5魔法堂:周详理解Drag & Drop
API,讲的很好。取值也得以参照高程 484 页。

简而言之要明了的是,DnD 并不会帮您做到 copy 大概 move
的其余操作,而是须要用户在 DnD 进程中,记录须求操作的对象新闻,然后在
drop 事件中成就 copy 或然 move 等的操作。

Tricks

还有多少个执行进度中发现的标题。

将 Demo 在 ff
中开拓,图片拖到空处,会自行在新标签中打开图片,就算自个儿一度在各样风浪中添加了
preventDefault(),尚不清楚原因。

固然可拖拽成分,伊始在三个可停放成分内部,先把成分拖出去,再放回来,将会触发
ondrop 事件,不过 e.target 却是被拖拽的要素。倘若放置在任何因素,target
会指向被放置的成分,而不是拖拽成分。那点能够透过判断 target
成分获得化解。关于这一点可以看下 w3cschool 的这一个demo,打开控制台,将图片拖出去,再拖回来,控制台会打字与印刷出错误,显明代码没有考虑到那一点。

持续读书越多相关小说:

正文由WeX5君整理,WeX5一款开源免费的html5开发工具,皇家赌场手机版,H5
App开发就用WeX5!

Leave a Comment.