必赢官网让拖放变的流行起来

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 的时候好对其实行拍卖卡塔 尔(英语:State of Qatar)。比方 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 对应卡塔 尔(英语:State of Qatar)事件,当放手鼠标並且被拖拽元素刚好在可停放成分上时,触发 ondrop
事件,当拖放事件截至时,触发 ondragend(和 ondragstart 对应)事件,无论拖放操作是或不是中标,均会触发该事件。

先是大家须要钦定要拖动的成分,设置格局相当的轻易,给该 DOM 成分设置
draggable 属性,属性值设置为 true。比如那样:

dataTransfer


拖动进程中,回调函数接纳的平地风波参数,有二个 dataTransfer
属性。它指向贰个目的,包蕴了与拖动相关的种种新闻。

dataTransfer 对象首要有三种办法:getData() 和
setData(),要求小心的是,唯有在 dragstart 以及 drop
事件中应用那七个法子。简单想象,getData() 能够获得由 setData()
保存的值。setData() 方法的首先个参数,也是 getData()
方法唯大器晚成的一个参数,是个字符串,表示保留的数据类型,取值为 ‘text’ 或
‘UTiguanL’。IE 只定义了 ‘text’ 和 ‘UMercedes-EQL’ 二种有效的数据类型,而 HTML5
则对此加以扩充,允许内定各个 MIME 类型。

在拖动文本框中的文本时,浏览器会活动调用 setData() 方法,将拖动的文书以
‘text’ 格式保存在 dataTransfer
对象中,相近地,在拖放链接或许图像时,会活动调用 setData() 将 U大切诺基L
消息保存,如若有亟待,在 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
事件的暗中同意行为是以链接格局展开卡塔 尔(英语:State of Qatar)
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卡塔 尔(英语:State of Qatar),当被拖动成抽离开可停放成分的一会儿,触发 ondragleave(和
ondragenter 对应卡塔 尔(阿拉伯语:قطر‎ 事件,当放手鼠标何况被拖拽成分恰好在可放置成分上时,触发 ondrop 事件,当拖放事件甘休时,触发
ondragend(和 ondragstart 对应卡塔 尔(阿拉伯语:قطر‎事件,无论拖放操作是或不是成功,均会触发该事件。

发表评论

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