菜单

HTML5 — 让拖放变的流行起来

2019年3月15日 - 金沙前端

dataTransfer


拖动进度中,回调函数接受的风云参数,有叁个 dataTransfer
属性。它指向多个指标,包含了与拖动相关的各类消息。

dataTransfer 对象重要有二种方法:getData() 和
setData(),需求留意的是,唯有在 dragstart 以及 drop
事件中接纳那多个方式。简单想象,getData() 能够赢得由 setData()
保存的值。setData() 方法的率先个参数,也是 getData()
方法唯一的二个参数,是个字符串,表示保留的数据类型,取值为 ‘text’ 或
‘UOdysseyL’。IE 只定义了 ‘text’ 和 ‘U酷威L’ 二种有效的数据类型,而 HTML5
则对此加以增添,允许钦点各样 MIME 类型。

在拖动文本框中的文本时,浏览器会自行调用 setData() 方法,将拖动的公文以
‘text’ 格式保存在 dataTransfer
对象中,类似地,在拖放链接只怕图像时,会自行调用 setData() 将 USportageL
消息保存,借使有亟待,在 drop 事件中得以用 getData()
读取浏览器保存的值。

可是那不啻并从未什么样卵用,大家在实质上付出中多数也许对 DOM
的操作,于是多数情况下大家在 dragstart 事件处理程序中调用
setData(),手工保存本身要传输的数目,然后在 drop 事件中读取,有点像
jQuery 的 data 事件。

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

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

简介

拖放是一种常见的特色,即抓取对象未来拖到另贰个职位。

在 HTML5 中,拖放是明媒正娶的一片段,任何因素都能够拖放。

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

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

提示: 链接和图片默许是可拖动的,不要求 draggable 属性。

概念和用法

在拖放的进度中会触发之下事件:

浏览器扶助

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
属性调用了2个函数,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 属性调用了3个函数,drop(event):

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

代码解释:

贯彻的结果如图:

图片 2 

dataTransfer对象

在拖曳操作的过程中,大家得以用过dataTransfer对象来传输数据,以便在拖曳操作结束的时候对数码开始展览任何的操作。

对象属性:

指标方法:

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>

火狐浏览器拖拽难点

唯独进展到那时候在火狐浏览器中发现3个难题:

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 简介
拖放是一种普遍的性状,即抓取对象今后拖到另贰个地方。 在 HTML5中,拖放是标准…

参考

HTML Drag and Drop
API
DataTransfer

 

HTML5 — 让拖放变的流行起来

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

原著出处: 韩子迟   

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

在 HTML5 出现在此之前,页面成分的拖放需求监听 mousedown、mouseover 以及
mouseup 等一多种事件,然后改变成分的相持地点来促成这一功效。HTML
DnD(Drag-and-Drop)API 的产出,使得拖放变的简约。然而出于 DnD
尚处在草案阶段,各浏览器对其正式并未统一,有些事件在不一致浏览器中会出现分裂功效。

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

dropEffect 与 effectAllowed

火狐浏览器拖拽难点

唯独实行到那时候在火狐浏览器中发觉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));
}

dropEffect 与 effectAllowed


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

此间自身测试了五款浏览器,chrome、ff 以及 uc,chrome 和 uc 表现一般。

相似我们将成分脱离原来的地方,肩周炎势会成为
“禁手”,直到成分被拖到可放置区域上。

图片 3

只是 ff 不然,在 ff 中,成分在拖动的历程中不会来得 “禁手”。

当成分被拖到可放置区域上时,暗中同意跟骨骨折势如下。

图片 4

实际通过安装 dropEffecteffectAllowed
总共能安装二种骨折势(move, copy,以及 link),分别如下(move
和暗中同意貌似一样):

图片 5

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

大家也得以对 dropEffect 和 effectAllowed 的值举办设定,让某 drop
成分只好放 move 成分,可能 copy
成分等。具体能够看下那篇,HTML5魔法堂:周到精通Drag & Drop
API,讲的很好。取值也能够参见高程
484 页。

简单来说要精晓的是,DnD 并不会帮您完了 copy 大概 move
的任何操作,而是须要用户在 DnD 进度中,记录须求操作的指标音讯,然后在
drop 事件中成功 copy 或许 move 等的操作。

Tricks

简介

拖放是一种普遍的表征,即抓取对象现在拖到另四个地点。

在 HTML5 中,拖放是明媒正娶的一部分,任何因素都能够拖放。

先点击三个小例子:在用户开头拖动 <p> 成分时实施 JavaScript

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

提示: 链接和图表默许是可拖动的,不要求 draggable 属性。

Tricks


还有多少个执行进程中发现的难点。

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

假如可拖拽成分,初阶在2个可停放元素内部,先把成分拖出去,再放回来,将会触发
ondrop 事件,不过 e.target 却是被拖拽的成分。假诺放置在其余因素,target
会指向被停放的因素,而不是拖拽成分。这一点能够由此判断 target
成分获得消除。关于那一点能够看下 w3cschool 的那些
demo,打开控制台,将图纸拖出去,再拖回来,控制台会打字与印刷出荒谬,显著代码没有考虑到那或多或少。


Read More:

图片 6

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

对象方法:

事件


上边已经关系了 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 对应)
事件,无论拖放操作是或不是成功,均会触发该事件。

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";
}

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 事件。

dataTransfer 对象首要有二种格局:getData() 和
setData(),必要注意的是,唯有在 dragstart 以及 drop
事件中央银行使这多个办法。简单想象,getData() 能够收获由 setData()
保存的值。
setData() 方法的首先个参数,也是 getData()
方法唯一的三个参数,是个字符串,表示保留的数据类型,取值为 ‘text’ 或
‘URAV4L’。IE 只定义了 ‘text’ 和 ‘URAV4L’ 三种有效的数据类型, 而 HTML5
则对此加以扩张,允许钦点各个 MIME 类型。

开始展览停放 – ondrop

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

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

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

代码解释:

贯彻的结果如图:

图片 7

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()
事件的暗中认可行为,楼主在实操中没有察觉那一点。

当成分被拖动到某一成分上时,即会接触后者的 ondrop 事件,假诺急需科学触发
ondrop 事件,还索要撤销部分 DnD 事件的暗中认可行为:

放到哪儿 – ondragover

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

暗中认可地,不大概将数据/元素放置到其余因素中。如若急需设置允许放置,大家亟须遏止对成分的暗许处理格局。

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

event.preventDefault()

在 HTML5 现身从前,页面成分的拖放必要监听
mousedown、mouseover 以及 mouseup
等一多级事件,然后改成成分的周旋地方来贯彻那1/10效。HTML
DnD(Drag-and-Drop)API 的出现,使得拖放变的简练。但是出于 DnD
尚处在草案阶段,各浏览器对其标准并未统一,有些事件在分歧浏览器中会出现不相同成效。

拖动什么 – ondragstart 和 setData()

接下来,规定当成分被拖动时,会时有产生什么样。

在地点的例证中,ondragstart
属性调用了一个函数,drag(event),它规定了被拖动的数据。

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

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

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

接二连三读书越来越多相关小说:

实例

先贴代码,再逐一表达:

<!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>

拖拽前的页面效果为:

图片 8

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

将 德姆o 在 ff
中打开,图片拖到空处,会自动在新标签中开拓图片,就算自身早就在各类风云中丰盛了
preventDefault(),尚不清楚原因。

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>

Drag

概念和用法

在拖放的长河中会触发之下事件:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图