有些事件在不同浏览器中会出现不同效果

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奔驰M级L’ 二种有效的数据类型,而 HTML5 则对此加以扩充,允许钦命各样 MIME 类型。

在拖动文本框中的文本时,浏览器会自行调用 setData() 方法,将拖动的文件以 ‘text’ 格式保存在 dataTransfer 对象中,类似地,在拖放链接或然图像时,会活动调用 setData() 将 U奥迪Q5L 消息保存,假若有亟待,在 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奥迪Q7L’。IE 只定义了 ‘text’ 和 ‘ULANDL’ 二种有效的数据类型, 而 HTML5 则对此加以增添,允许钦赐各个 MIME 类型。

在拖动文本框中的文本时,浏览器会自动调用 setData() 方法,将拖动的公文以 ‘text’ 格式保存在 dataTransfer 对象中,类似地,在拖放链接只怕图像时,会自行调用 setData() 将 U陆风X8L 信息保存,若是有亟待,在 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

还应该有多少个实践进度中发觉的标题。

将 德姆o 在 ff 中开荒,图片拖到空处,会自行在新标签中开荒图片,纵然作者早已在各个风浪中增进了 preventDefault(),尚不清楚原因。

设若可拖拽成分,最早在二个可停放成分内部,先把成分拖出去,再放回来,将会触发 ondrop 事件,不过 e.target 却是被拖拽的要素。假如放置在其他因素,target 会指向被放置的因素,实际不是拖拽成分。那一点能够经过判别 target 成分获得消除。关于那一点能够看下 w3cschool 的这些demo,张开调控台,将图纸拖出去,再拖回来,调控台会打字与印刷出错误,明显代码未有设想到这点。

接轨读书越多相关文章:

本文由WeX5君整理,WeX5一款开源免费的html5开拓工具,H5 App付出就用WeX5!

本文由金莎娱乐场官方网站发布于关于计算机,转载请注明出处:有些事件在不同浏览器中会出现不同效果

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。