一是急需拖动的因素
分类:前端科技

HTML5 — 让拖放变的流行起来

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

最早的文章出处: 韩子迟   

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

在 HTML5 出现此前,页面成分的拖放必要监听 mousedown、mouseover 以及mouseup 等一多元事件,然后改成成分的相持地方来完结这一功能。HTML DnD(Drag-and-Drop)API 的面世,使得拖放变的简约。然则出于 DnD 尚处在草案阶段,各浏览器对其规范并未统一,某件事件在差异浏览器中会出现差异效能。

要选拔DnD,须要分明两件事业,一是索要拖动的因素,二是可停放拖动成分的职位。拖放无非是将元素从三个地点拖到另三个地方。

在 HTML5 出现在此之前,页面成分的拖放供给监听 mousedown、mouseover 乃至 mouseup 等一雨后春笋事件,然后改动成分的相对地点来贯彻这一成效。HTML DnD(Drag-and-Drop)API 的出现,使得拖放变的简便。不过由于 DnD 尚处在草案阶段,各浏览器对其规范并未有统一,有些事件在不相同浏览器中会出现不一样成效。

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 事件,该事件只会触发一次。平日大家会在 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,供给显明两件事情,一是索要拖动的因素,二是可放置拖动成分的职位。拖放无非是将成分从三个职位拖到另四个地点。

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

事件


地方已经提到了 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。譬喻那样:

dataTransfer


拖动进程中,回调函数接受的事件参数,有二个 dataTransfer 属性。它指向叁个指标,包蕴了与拖动相关的种种新闻。

dataTransfer 对象重要有二种方法:getData() 和 setData(),需求在乎的是,独有在 dragstart 以及 drop 事件中使用那多少个情势。简单想象,getData() 能够获得由 setData() 保存的值。setData() 方法的率先个参数,也是 getData() 方法唯一的多个参数,是个字符串,表示保留的数据类型,取值为 ‘text’ 或 ‘UENVISIONL’。IE 只定义了 ‘text’ 和 ‘UEvoqueL’ 二种有效的数据类型,而 HTML5 则对此加以增加,允许钦赐各样 MIME 类型。

在拖动文本框中的文本时,浏览器会自行调用 setData() 方法,将拖动的公文以 ‘text’ 格式保存在 dataTransfer 对象中,类似地,在拖放链接只怕图像时,会活动调用 setData() 将 UTucsonL 新闻保存,要是有需求,在 drop 事件中得以用 getData() 读取浏览器保存的值。

可是这不啻并不曾什么卵用,大家在事实上付出中大部要么对 DOM 的操作,于是非常多景况下大家在 dragstart 事件管理程序中调用 setData(),手工业保存本身要传输的多寡,然后在 drop 事件中读取,有一点点像 jQuery 的 data 事件。

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

dropEffect 与 effectAllowed


dropEffecteffectAllowed 是前边说的 dataTransfer 对象的多个天性,有吗用?轻便地说,有七个用处,一是足以设置成分被拖拽时的鼠标准样品式,二是能够安装成分是或不是可被放置。

此处本身测验了七款浏览器,chrome、ff 以至 uc,chrome 和 uc 表现日常。

貌似大家将成分脱离原本的岗位,变形性骨炎势会产生“禁手”,直到成分被拖到可放置区域上。

图片 1

不过 ff 不然,在 ff 中,成分在拖动的进度中不博览会示 “禁手”。

当成分被拖到可停放区域上时,暗中认可复发性风湿病势如下。

图片 2

实际上通过设置 dropEffecteffectAllowed 总共能安装三种腰椎间盘突出势(move, copy,以致 link),分别如下(move 和私下认可貌似同样):

图片 3

需要在 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 即为浏览器暗许值。

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

当我们左键点击(按下)可拖动的 DOM 成分,轻轻移动,即触发 ondragstart 事件,该事件只会触发三回。平时我们会在 ondragstart 事件中记录正在被拖动的因素音讯(ondrop 的时候好对其打开管理)。举个例子 demo 中记录了正在被拖动的成分 id:

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

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

Drop

其次大家需求理解被拖动成分可放置的地点,ondragover 事件规定在哪个地方放置被拖动的多少。
暗中同意地,不恐怕将成分放置到其他因素中,如若急需设置允许放置,大家亟须遏止对成分的暗中同意管理格局:

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

稍Gavin献中说要吊销 ondragenter() 事件的暗中同意行为,楼主在实操中一贯不察觉那点。

事件

下面已经涉及了 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 属性。它指向八个对象,包括了与拖动相关的各样音信。

dataTransfer 对象首要有三种格局:getData() 和 setData(),须要注意的是,唯有在 dragstart 以至 drop 事件中应用那多少个方法。轻易想象,getData() 可以获得由 setData() 保存的值。
setData() 方法的率先个参数,也是 getData() 方法独一的五个参数,是个字符串,表示保留的数据类型,取值为 ‘text’ 或 ‘U智跑L’。IE 只定义了 ‘text’ 和 ‘U奥迪Q7L’ 二种有效的数据类型, 而 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!

本文由网上正规真人赌钱网站发布于前端科技,转载请注明出处:一是急需拖动的因素

上一篇:WebGL 是 HTML 5 草案的一部分 下一篇:没有了
猜你喜欢
热门排行
精彩图文