>

让拖放变的流行起来

- 编辑:金沙国际平台登录 -

让拖放变的流行起来

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’ 或 ‘U帕杰罗L’。IE 只定义了 ‘text’ 和 ‘U大切诺基L’ 二种有效的数据类型,而 HTML5 则对此加以扩充,允许钦命各类 MIME 类型。

在拖动文本框中的文本时,浏览器会活动调用 setData() 方法,将拖动的文书以 ‘text’ 格式保存在 dataTransfer 对象中,类似地,在拖放链接大概图像时,会活动调用 setData() 将 U昂CoraL 新闻保存,固然有须求,在 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);
};

有一点点文献中说要收回 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’ 和 ‘UPAJEROL’ 三种有效的数据类型, 而 HTML5 则对此加以扩充,允许钦赐各类 MIME 类型。

在拖动文本框中的文本时,浏览器会自动调用 setData() 方法,将拖动的文本以 ‘text’ 格式保存在 dataTransfer 对象中,类似地,在拖放链接大概图像时,会自动调用 setData() 将 U奥迪Q3L 信息保存,假使有亟待,在 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!

本文由首页发布,转载请注明来源:让拖放变的流行起来