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卡塔 尔(英语:State of Qatar)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卡塔 尔(英语:State of Qatar)、链接(带 href 的 a
标签卡塔尔国以至文本私下认可即为可拖动。为了统生机勃勃,最好仍然都充足该 draggable
属性为好。

draggable 属性还应该有四个值,分别是 falseauto,从名称想到所包含的意义,false
即设置为不可拖动,auto 即为浏览器暗许值。

当我们左键点击(按下卡塔 尔(英语:State of Qatar)可拖动的 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 事件的默许行为是以链接格局展开卡塔 尔(英语:State of Qatar)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’ 和 ‘URAV4L’ 二种有效的数据类型,而 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卡塔 尔(英语:State of Qatar),分别如下(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

当大家左键点击(按下卡塔 尔(英语:State of Qatar)可拖动的 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);
};

稍Gavin献中说要撤除 ondragenter()
事件的暗许行为,楼主在实操中从未察觉这一点。

事件

上边已经涉及了 DnD 中的四个事件,dragstart、dragover 以至 drop,其实 DnD
还会有多少个事件,它们的发出顺序是:

dragstart(drag元素) -> drag(drag元素) -> dragenter(drop元素) ->
dragover(drop元素) -> dragleave(drop元素) -> drop(drop元素) ->
dragend(drag元素)

简单通晓,拖放事件早先时触发 ondragstart
事件,当被拖动成分进入可放置的成分时,触发 ondragenter 事件(ondragenter
并非在多少个因素相交时即触发,而是该被拖拽元素在对象成分上活动大器晚成段时间后才触发卡塔 尔(英语:State of Qatar),之后意气风发段事件会无休无止触发
ondragover 事件(可参照他事他说加以考查mouseover卡塔 尔(英语:State of Qatar),当被拖动成分离开可停放成分的差之毫厘,触发 ondragleave(和
ondragenter 对应卡塔尔国 事件,当松手鼠标并且被拖拽成分偏巧在可停放成分上时,触发 ondrop 事件,当拖放事件停止时,触发
ondragend(和 ondragstart 对应卡塔尔事件,无论拖放操作是还是不是成功,均会触发该事件。

相关文章