让拖放变的流行起来,5是如何流行起来的

HTML5 — 让拖放变的流行起来

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

原稿出处: 韩子迟   

先上 Demo,尽量用
chrome,代码可参考
Github。

在 HTML5 出现在此以前,页面成分的拖放须求监听 mousedown、mouseover 以及
mouseup 等一文山会海事件,然后改变成分的相持地方来落成这一效率。HTML
DnD(Drag-and-Drop)API 的面世,使得拖放变的简要。可是出于 DnD
尚处在草案阶段,各浏览器对其正式并未统一,有些事件在不一致浏览器中会出现区别成效。

要动用
DnD,需求分明两件事情,一是供给拖动的成分,二是可停放拖动成分的职位。拖放无非是将成分从二个地点拖到另1个地点。

在 HTML5 出现以前,页面成分的拖放须要监听
mousedown、mouseover 以及 mouseup
等一文山会海事件,然后改成成分的绝对地点来兑现这一成效。HTML
DnD(Drag-and-Drop)API 的面世,使得拖放变的归纳。可是由于 DnD
尚处在草案阶段,各浏览器对其规范并未统一,有个别事件在不一致浏览器中会现身分歧功能。

HTML5 并不是什么出格技术,其实从前用Flash
也能兑现那一个技术,为啥能火起来,完全是个炒作。

拖放:抓取对象今后拖到另二个岗位

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
事件,该事件只会触发1遍。平常大家会在 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,须要肯定两件业务,一是急需拖动的成分,二是可停放拖动成分的地方。拖放无非是将成分从三个地方拖到另1个岗位。

HTML5 是多少个部分构成的,CSS3,DOM Level3,ECMA 5,SVG
四项技艺结合,并非一味的JS 和CSS。

浏览器支持##\

Internet Explorer 九 、Firefox、Opera 1二 、Chrome 以及 Safari 5
援助拖放。
评释:在 Safari 5.1.2 中不帮忙拖放。

Drop


让拖放变的流行起来,5是如何流行起来的。帮助大家必要肯定被拖动元素可放置的职位,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

HTML5 在桌面领域的施用不如Android 2.2+ 和iphone ,ipad
上的运用好,因为桌面领域,还有不少的IE 用户,所以想用多量的HTML5 …

设置成分为可拖放####\

先是,为了使成分可拖动,把 draggable 属性设置为 true :
<img draggable="true" />

事件


上边已经涉嫌了 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。比如那样:

HTML5最最要紧的正是各大浏览器的协理,好了,各个浏览器都扶助了,所以它火起来了,而且它又援助移动支付,跨平台了,所以流行度就更广了。

拖动什么 ondragstart()和set Data()####\

显然成分被拖动时会产生什么样
ondragstart() — 拖拽前触发
set Data() — 设置数据key和value

<body>
    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</body>
<script>
function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}
</script>

dataTransfer


拖动过程中,回调函数接受的轩然大波参数,有3个 dataTransfer
属性。它指向贰个对象,包括了与拖动相关的种种消息。

dataTransfer 对象首要有二种办法:getData() 和
setData(),必要小心的是,唯有在 dragstart 以及 drop
事件中使用这八个法子。不难想象,getData() 能够得到由 setData()
保存的值。setData() 方法的首先个参数,也是 getData()
方法唯一的3个参数,是个字符串,表示保留的数据类型,取值为 ‘text’ 或
‘UOdysseyL’。IE 只定义了 ‘text’ 和 ‘U福特ExplorerL’ 二种有效的数据类型,而 HTML5
则对此加以扩大,允许钦命各个 MIME 类型。

在拖动文本框中的文本时,浏览器会自动调用 setData() 方法,将拖动的公文以
‘text’ 格式保存在 dataTransfer
对象中,类似地,在拖放链接或然图像时,会自行调用 setData() 将 UCRUISERL
新闻保存,如若有亟待,在 drop 事件中得以用 getData()
读取浏览器保存的值。

唯独那仿佛并从未什么样卵用,我们在实际上支出中山高校部只怕对 DOM
的操作,于是多数情况下我们在 dragstart 事件处理程序中调用
setData(),手工业保存自个儿要传输的数码,然后在 drop 事件中读取,有点像
jQuery 的 data 事件。

<img src=”images/0.jpg” draggable=”true” id=”img0″/>

图片 1

嵌入哪儿 ondragover####\

ondragover 事件规定在哪儿放置被拖动的数码。
默许地,不或然将数据/元素放置到其余因素中。假诺急需设置允许放置,大家无法不遏止对成分的暗中同意处理格局。这要因此调用
ondragover 事件的 event.preventDefault()方法

dropEffect 与 effectAllowed


dropEffecteffectAllowed 是前方说的 dataTransfer
对象的两日特性,有甚用?不难地说,有多少个用处,一是足以设置成分被拖拽时的鼠标准样品式,二是能够安装成分是不是可被放置。

那边本人测试了四款浏览器,chrome、ff 以及 uc,chrome 和 uc 表现一般。

貌似大家将成分脱离原来的岗位,坐骨神经痛势会化为
“禁手”,直到成分被拖到可放置区域上。

图片 2

可是 ff 不然,在 ff 中,成分在拖动的经过中不会议及展览示 “禁手”。

当成分被拖到可停放区域上时,暗中认可骨关节炎势如下。

图片 3

实则通过设置 dropEffecteffectAllowed
总共能安装三种骨质增生势(move, copy,以及 link),分别如下(move
和暗中认可貌似一样):

图片 4

需要在 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 即为浏览器暗中同意值。

 

开始展览停放 ondrop####\

当放置被拖数据时,会产生 drop 事件。

<body>
    <div id="div1" ondrop="drop(event)"  ondragover="allowDrop(event)"></div>
 </body>
<script>
   function drop(ev){
      ev.preventDefault();
      var data=ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
   }
</script>

Tricks


再有多少个实施进度中窥见的难题。

将 Demo 在 ff
中开辟,图片拖到空处,会自动在新标签中开拓图片,固然笔者早就在各个风云中加上了
preventDefault(),尚不清楚原因。

一经可拖拽元素,发轫在3个可停放成分内部,先把成分拖出去,再放回来,将会触发
ondrop 事件,可是 e.target 却是被拖拽的因素。假使放置在其他因素,target
会指向被停放的成分,而不是拖拽成分。那一点能够由此判断 target
成分获得消除。关于那一点能够看下 w3cschool 的那些
demo,打开控制台,将图纸拖出去,再拖回来,控制台会打字与印刷出荒唐,显著代码没有设想到那或多或少。


Read More:

  • HTML 5
    拖放
  • HTML5魔法堂:周详驾驭Drag & Drop
    API
  • HTML5 拖放API
  • HTML5拖放操作API及实例

    1 赞 6 收藏 4
    评论

图片 5

当大家左键点击(按下)可拖动的 DOM 成分,轻轻移动,即触发 ondragstart
事件,该事件只会触发三次。平常我们会在 ondragstart
事件中记录正在被拖动的因素音讯(ondrop 的时候好对其进展处理)。比如 demo
中记录了正在被拖动的成分 id:

 

demo##\

<!DOCTYPE HTML>
<html>
    <head>
    <script type="text/javascript">
        function allowDrop(ev){
              ev.preventDefault();
        }

        function drag(ev){
              ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev){
              ev.preventDefault();
              var data=ev.dataTransfer.getData("Text");
              ev.target.appendChild(document.getElementById(data));
        }
    </script>
    </head>
<body>

       <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

**代码解释####

for (var i = lis.length; i–; ) {
lis[i].ondragstart = function(e) {
e.dataTransfer.setData(‘id’, e.target.id);
};
}

      ondragstart 事件触发后,直到拖放事件甘休,会一向触发 ondrag 事件。

Drop

其次我们需求掌握被拖动成分可停放的岗位,ondragover
事件规定在哪个地方放置被拖动的数码。
暗中认可地,不能够将成分放置到任何因素中,若是供给安装允许放置,我们务必遏止对成分的暗中认可处理格局:

相关文章