html5拖拽-初探

标签：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">

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

function handleDragStart(e) {

            e.dataTransfer.effectAllowed = 'move';

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

}

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

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

function 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));
}

接着通过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