来自 前端知识 2019-09-17 03:26 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

【澳门金莎娱乐手机版】让拖放变的流行起来

HTML5 — 让拖放变的流行起来

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

原稿出处: 韩子迟   

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

在 HTML5 出现在此之前,页面成分的拖放须要监听 mousedown、mouseover 以及 mouseup 等一多重事件,然后改成成分的相对地点来兑现这一功能。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 即为浏览器默许值。

当大家左键点击(按下)可拖动的 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 对应) 事件,当松手鼠标况兼被拖拽元素正幸亏可停放成分上时,触发 ondrop 事件,当拖放事件截止时,触发 ondragend(和 ondragstart 对应) 事件,无论拖放操作是不是成功,均会触发该事件。

dataTransfer


拖动进程中,回调函数接受的风云参数,有多少个 dataTransfer 属性。它指向二个对象,包括了与拖动相关的各样音信。

dataTransfer 对象首要有二种办法:getData() 和 setData(),必要小心的是,独有在 dragstart 以及 drop 事件中运用那多个格局。轻松想象,getData() 能够获取由 setData() 保存的值。setData() 方法的率先个参数,也是 getData() 方法唯一的三个参数,是个字符串,表示保留的数据类型,取值为 ‘text’ 或 ‘ULANDL’。IE 只定义了 ‘text’ 和 ‘ULANDL’ 三种有效的数据类型,而 HTML5 则对此加以扩张,允许钦命各类 MIME 类型。

在拖动文本框中的文本时,浏览器会活动调用 setData() 方法,将拖动的公文以 ‘text’ 格式保存在 dataTransfer 对象中,类似地,在拖放链接恐怕图像时,会活动调用 setData() 将 UPAJEROL 新闻保存,借使有须要,在 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),分别如下(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

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:【澳门金莎娱乐手机版】让拖放变的流行起来

关键词: