码迷,mamicode.com
首页 > Web开发 > 详细

html5拖拽-初探

时间:2015-06-15 22:19:07      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:html5   拖放   drag   drop   

先看看效果

技术分享

完整测试代码:

<p>Html5 拖拽</p>
<div id="box" ondrop="handleDrop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="img1" src="images/screen1.jpg" draggable="true" ondragstart="handleDragStart(event)"  width="150" height="100">
<img id="img2" src="images/screen2.jpg" draggable="true" ondragstart="handleDragStart(event)"  width="150" height="100">
<img id="Img3" src="images/screen3.jpg" draggable="true" ondragstart="handleDragStart(event)"  width="150" height="100">

#box {
            width: 450px;
            height: 100px;
            padding: 10px;
            border: 1px dotted red;
}


<script>
        function allowDrop(e) {
            e.preventDefault();
        }

        function handleDragStart(e) {
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData("Text", e.target.id);
        }

        function handleDrop(e) {
            e.preventDefault();
            var src = e.dataTransfer.getData("Text");
            e.target.appendChild(document.getElementById(src));
        }

</script>


接下来对代码进行一一讲解:

Drag的英译是 拖、拽 ;Drop的意思是 放下

Drag和Drop 是html5中新增的特性,任何元素都能够拖放大部分主流浏览器目前也够支持html5的拖放功能。

完成拖放的过程主要是由draggable属性、ondragstart 事件、dataTransfer.setData() 方法、Ondragover 事件 、ondrop事件和dataTransfer.getData() 方法 来完成,接下来详细的说明这些属性和事件是怎么完成拖放。

1. 我们想要拖动那个元素,首先要把这个元素设置成可拖拽,将该元素的draggable 属性设置为 true

有三个值true,false,auto.  true可以拖,false不可以,auto由用户浏览器是否支持而定

<img id="img1" src="images/screen1.jpg" draggable="true" ondragstart="handleDragStart(event)"  width="150" height="100">
2.  ondragstart 和dataTransfer.setData() 决定了当我们拖动元素的时候会干些什么事:

例如例子中当通过鼠标拖动图标的时候就会触发ondragstart事件,这个事件触发handleDragStart这个函数。

function handleDragStart(e) {

            e.dataTransfer.effectAllowed = 'move';

            e.dataTransfer.setData("Text", e.target.id);

}
拖动img时,浏览器会调用setData()方法,将拖动的img的id值以”text”格式保存在dataTransfer对象中。(注:保存在dataTransfer对象中的数据只能在ondrop事件触发的函数中getData来读取)。

  关于dataTansfer对象的属性和方法的详细介绍请看本文结尾!


3. 拖动元素之后,要把元素放到哪里?所以要设定目标元素,例子中是要把拖动的元素放入box这个div中,所以给div添加了ondragover事件,该事件触发了allowDrop(e)这个函数。

function allowDrop(e) {
       e.preventDefault();
 }

注: ondragover 事件规定在何处可以放置被拖动的元素。(默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,则必须阻止对元素的默认事件,即:若想触发ondrop事件,ondragover 中必须阻止默认事件所以allowDrop(e)函数里通过e.preventDefault()阻止了默认行为。

 

4. 我们知道了要把元素放到box这个div里,而当我们放下元素时发生 ondrop事件,所以要在box这个div里设置ondrop事件,该事件触发handleDrop(event)这个函数。

function handleDrop(e) {
            e.preventDefault();
            var src = e.dataTransfer.getData("Text");
            e.target.appendChild(document.getElementById(src));
}

通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置的数据,因为之前setData() 设置的是img的id值,所以这里返回的就是相应img的id值。

接着通过document.getElementById(src)获取的被拖元素

接着通过appendChild函数把被拖元素img追加到目标元素div)

注: 在Firefox 3.5+中,如果是把图像拖放到放置目标上,页面就会转向图像文件;而如果是把文本拖放到放置目标上,则会导致无效URL错误,因此,为了让Firefox支持正常的拖放,还要取消drop事件的默认行为,阻止它打开URL。

 

最后详细介绍下dataTransfer对象

以下内容参考了:http://jingyan.baidu.com/article/6dad5075cf6e62a123e36e11.html


dataTransfer对象是事件对象的一个属性,用于从被拖拽元素目标元素传递字符串格式的数据。因为它是事件对象的属性,所以只有在获取到事件对象的前体下才能访问dataTransfer对象。

dataTransfer对象有两个主要的方法:getData()方法和setData()方法。setData()方法的第一个参数,也是getData()方法唯一的一个参数,是用来保存数据类型的字符串,取值是”text”或”URL”。

  将数据保存在文本text和保存为URL是有区别的。如果将数据保存为文本格式,那么数据不会得到任何特殊处理。如果保存为URL格式,浏览器会将其当成网页中的链接。如果你将这个URL放置到另一个浏览器窗口中,就可以打开该URL。

dataTransfer对象dropEffect属性和effectAllowed属性

  运用dataTransfer对象,不仅仅能传输数据,还能通过dataTransfer对象确定被拖拽元素以及目标的元素能够接收什么操作。要实现这样的功能就用到了dropEffect属性和effectAllowed属性。

通过dropEffect属性可以知道被拖动的元素能够执行哪种行为。四个值

  none:不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。

  move:应该把拖动的元素移动到放置目标。

  copy:应该把拖动的元素复制到放置目标。

  link:放置目标会打开拖动的元素(但拖动的元素必须是个链接,有URL地址)。

  把元素拖动到目标元素上的时候,以上每一个值都会导致光标显示为不同的符号。光有dropEffect属性是不咋管用的。只有结合effectAllowed属性一起使用才能发挥功效。effectAllowed属性表示允许拖动元素的哪种(dropEffect)行为。effectAllowed属性也有很多值,其值如下:

  uninitialized:没有给被拖动元素设置任何放置行为。

  none:被拖动的元素不能有任何行为。

  copy:只允许值为”copy”的dropEffect。

  link:只允许值为”link”的dropEffect。

  move:只允许值为”move”的dropEffect。

  copyLink:允许值为”copy”和”link”的dropEffect。

  copyMove:允许值为”copy”和”move”的dropEffect。

  linkMove:允许值为”link”和”move”的dropEffect。

  all:允许任意dropEffect。

注 : 要设置effectAllowed属性必须在ondragstart事件触发的函数中设置




html5拖拽-初探

标签:html5   拖放   drag   drop   

原文地址:http://blog.csdn.net/u014205965/article/details/46505927

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!