让拖放变的流行起来

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’ 和 ‘U哈弗L’ 三种有效的数据类型,而 HTML5
则对此加以扩张,允许钦命各类 MIME 类型。

在拖动文本框中的文本时,浏览器会自动调用 setData() 方法,将拖动的公文以
‘text’ 格式保存在 dataTransfer
对象中,类似地,在拖放链接大概图像时,会自行调用 setData() 将 U传祺L
新闻保存,若是有供给,在 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

发表评论

电子邮件地址不会被公开。 必填项已用*标注