拖放是标准的一部分巴黎人澳门官网:,拖放是
分类:巴黎人-前端

HTML5 — 让拖放变的流行起来

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

初稿出处: 韩子迟   

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

在 HTML5 出现此前,页面成分的拖放需求监听 mousedown、mouseover 以及 mouseup 等一文山会海事件,然后更改成分的对峙地方来达成这一效果与利益。HTML DnD(Drag-and-Drop)API 的面世,使得拖放变的简要。不过出于 DnD 尚处在草案阶段,各浏览器对其规范并未有统一,某事件在差异浏览器中会出现分化作用。

要动用 DnD,须要分明两件事情,一是要求拖动的成分,二是可停放拖动成分的岗位。拖放无非是将成分从一个职责拖到另二个职分。

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

简介

拖放是一种常见的特征,即抓取对象现在拖到另二个岗位。

在 HTML5 中,拖放是标准的一局地,任何因素都能够拖放。

先点击二个小例子:在顾客起首拖动 <p> 成分时进行 JavaScript

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

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

概念和用法

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

  • 在拖动目的上接触事件 (源成分):  ondragstart - 客户初始拖动元素时接触
    • ondrag - 成分正在拖动时接触
    • ondragend - 顾客实现成分拖动后触发
  • 获释指标时接触的平地风波:  ondragenter - 当被鼠标拖动的对象步入其容器范围内时触发那件事件
    • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发这事件
    • ondragleave - 当被鼠标拖动的目的离开其容器范围内时触发那一件事件
    • ondrop - 在三个拖动进程中,释放鼠标键时触发这件事件

浏览器帮助

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):加多自定义Logo
  • setDragImage(element,x,y):设置拖放操作的自定义Logo。个中element设置自定义Logo,x设置Logo与鼠标在档期的顺序方向上的偏离,y设置Logo与鼠标在笔直方向上的相距。

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>

火狐浏览器拖拽难题

然则进展到此时在火狐浏览器中窥见贰个难点:

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中,拖放是规范...

进行停放 - 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")
  • 把被拖成分追加到放置成分(指标元素)中

兑现的结果如图:

巴黎人澳门官网 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));
}

dataTransfer


拖动进度中,回调函数接受的平地风波参数,有一个 dataTransfer 属性。它指向一个对象,包涵了与拖动相关的各类消息。

dataTransfer 对象首要有两种办法:getData() 和 setData(),须求留心的是,只有在 dragstart 以及 drop 事件中选择那三个点子。简单想象,getData() 能够获取由 setData() 保存的值。setData() 方法的第二个参数,也是 getData() 方法独一的八个参数,是个字符串,表示保留的数据类型,取值为 ‘text’ 或 ‘UKoleosL’。IE 只定义了 ‘text’ 和 ‘U福特ExplorerL’ 二种有效的数据类型,而 HTML5 则对此加以扩展,允许钦定各样 MIME 类型。

在拖动文本框中的文本时,浏览器会活动调用 setData() 方法,将拖动的文本以 ‘text’ 格式保存在 dataTransfer 对象中,类似地,在拖放链接也许图像时,会活动调用 setData() 将 UENCOREL 音信保存,假如有亟待,在 drop 事件中能够用 getData() 读取浏览器保存的值。

唯独那犹如并未怎么卵用,大家在其实支出中山高校部分依旧对 DOM 的操作,于是好多情况下大家在 dragstart 事件管理程序中调用 setData(),手工业保存自个儿要传输的数码,然后在 drop 事件中读取,有一点点像 jQuery 的 data 事件。

dataTransfer对象

在拖曳操作的历程中,我们得以用过dataTransfer对象来传输数据,以便在拖曳操作甘休的时候对数码进行另外的操作。

简介

拖放是一种常见的性状,即抓取对象今后拖到另一个岗位。

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

先点击一个小例子:在顾客起初拖动 <p> 成分时实行 JavaScript

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

唤醒: 链接和图纸暗中认可是可拖动的,无需 draggable 属性。

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() 事件的暗许行为,楼主在实操中从未开采那一点。

 浏览器协助

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

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

dataTransfer对象

在拖曳操作的进程中,大家能够用过dataTransfer对象来传输数据,以便在拖曳操作甘休的时候对数据开展其它的操作。

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 评论

巴黎人澳门官网 4

实例

先贴代码,再逐条表明:

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

拖拽前的页面效果为:

巴黎人澳门官网 5

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

Define the drag effect

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

事件


地点已经提到了 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 对应) 事件,无论拖放操作是还是不是成功,均会触发该事件。

对象属性:

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

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

  • items:该属性重临DataTransferItems对象,该目的表示了拖动数据。

  • types:该属性再次回到二个DOMStringList对象,该目的包含了存入dataTransfer中数量的具备项目。

停放什么地方 - ondragover

ondragover 事件规定在何处放置被拖动的多少。

暗许地,不可能将数据/成分放置到其余因素中。若是须求安装允许放置,大家不能够不遏止对成分的暗中同意管理情势。

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

event.preventDefault()

本文由巴黎人手机版发布于巴黎人-前端,转载请注明出处:拖放是标准的一部分巴黎人澳门官网:,拖放是

上一篇://然后使用这个ctx绘制图形巴黎人澳门官网:,创 下一篇://第二次调用SuperType(),寄生组合继承基于Object
猜你喜欢
热门排行
精彩图文