www.qjdy.com-奇迹赌场 > 佳美特设计 > HTML5 — 让拖放变的流行起来

原标题:HTML5 — 让拖放变的流行起来

浏览次数:166 时间:2019-11-03

HTML5 — 让拖放变的流行起来

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

原来的作品出处: 韩子迟   

先上 Demo,尽量用 chrome,代码可参照他事他说加以考察 Github。

在 HTML5 现身早前,页面元素的拖放须求监听 mousedown、mouseover 以至mouseup 等风姿浪漫多种事件,然后改成成分的对峙地点来完毕那10%效。HTML DnD(Drag-and-Drop卡塔 尔(阿拉伯语:قطر‎API 的面世,使得拖放变的简短。但是由于 DnD 尚处在草案阶段,各浏览器对其标准并未有统后生可畏,某事件在区别浏览器中会现身不一样效用。

要选择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 即为浏览器暗中认可值。

当大家左键点击(按下卡塔 尔(英语:State of Qatar)可拖动的 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 事件。

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() 事件的私下认可行为,楼主在实操中并未有开掘那点。

事件


地点已经涉及了 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 对应卡塔 尔(英语:State of Qatar)事件,当放手鼠标並且被拖拽成分正巧在可停放成分上时,触发 ondrop 事件,当拖放事件甘休时,触发 ondragend(和 ondragstart 对应卡塔尔事件,无论拖放操作是或不是成功,均会触发该事件。

dataTransfer


拖动进度中,回调函数选拔的平地风波参数,有七个 dataTransfer 属性。它指向一个对象,富含了与拖动相关的种种音讯。

dataTransfer 对象主要有三种方法:getData() 和 setData(),须求介意的是,唯有在 dragstart 以及 drop 事件中使用那七个主意。简单想象,getData() 能够得到由 setData() 保存的值。setData() 方法的首先个参数,也是 getData() 方法唯意气风发的叁个参数,是个字符串,表示保留的数据类型,取值为 ‘text’ 或 ‘U兰德酷路泽L’。IE 只定义了 ‘text’ 和 ‘U奥迪Q3L’ 二种有效的数据类型,而 HTML5 则对此加以扩张,允许内定各样 MIME 类型。

在拖动文本框中的文本时,浏览器会自动调用 setData() 方法,将拖动的文书以 ‘text’ 格式保存在 dataTransfer 对象中,相像地,在拖放链接大概图像时,会活动调用 setData() 将 UKugaL 音信保存,假诺有必要,在 drop 事件中得以用 getData() 读取浏览器保存的值。

唯独那就好像并未怎么卵用,我们在实际支出中山大学部分要么对 DOM 的操作,于是大多状态下大家在 dragstart 事件处理程序中调用 setData(),手工业保存本身要传输的多少,然后在 drop 事件中读取,有一点点像 jQuery 的 data 事件。

dropEffect 与 effectAllowed


dropEffecteffectAllowed 是前方说的 dataTransfer 对象的多个特性,有甚用?轻便地说,有多少个用途,一是能够安装成分被拖拽时的鼠标准样板式,二是足以安装成分是不是可被停放。

这里小编测验了三款浏览器,chrome、ff 甚至 uc,chrome 和 uc 表现日常。

近似我们将元素脱离原本的岗位,变形性骨炎势会产生“禁手”,直到成分被拖到可停放区域上。

图片 1

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

当成分被拖到可停放区域上时,暗中同意脊椎结核势如下。

图片 2

实际上通过设置 dropEffecteffectAllowed 总共能安装二种成人骨坏死势(move, copy,以至 link卡塔 尔(英语:State of Qatar),分别如下(move 和私下认可貌似相近卡塔尔:

图片 3

需要在 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,展开调整台,将图片拖出去,再拖回来,调控台会打字与印刷出乖谬,显著代码未有虚构到那或多或少。


Read More:

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

    1 赞 6 收藏 4 评论

图片 4

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:HTML5 — 让拖放变的流行起来

关键词: CMD体育 HTML5

上一篇:H5 缓存机制浅析,移动端 Web 加载性能优化

下一篇:没有了