代码改变世界

HTML 5 Step by Step(一) 拖放API

2012-02-08 21:44  Henry Cui  阅读(3591)  评论(5)  编辑  收藏  举报

在Html4中，我们可以通过监听mousedown、mousemove、mouseup来实现拖放效果。在Html5中，直接提供了支持拖放操作的API，我们可以很简单的几步就可以实现拖放的效果。

实现的概要

首先我们了解下跟拖动相关的事件：

事件 产生的源对象 说明
dragstart 被拖动的元素 开始拖放动作
drag 被拖动的元素 拖放过程中
dragenter 拖动过程中鼠标经过的元素 被拖动的元素开始进入本元素的范围内
dragleave 拖动过程中鼠标经过的元素 被拖动的元素离开本元素的范围
drop 拖放的目标元素 有其他元素拖动到了本元素中
dragend 拖动的对象元素 拖动结束
dragover 拖动过程中鼠标经过的元素 被拖动的元素在本元素上移动

实现步骤：

1.我们要想一个元素可以被拖动，同时需要将元素的draggable属性设置为true（img、a默认允许拖放）；

2.监听拖动相关的事件。

Demo

我们实现一个将几个商品拖入的购物车的一个简单Demo，效果如下：

image

首先看下Html代码：

<body onload="init()">
    <span>商品列表</span>
    <div class="goodsList">
        <div class="goods" draggable="true">
            ThinkPad T410i</div>
        <div class="goods" draggable="true">
            Ipad 2</div>
    </div>
    <span>已选商品：</span>
    <div id="box" style="width: 200px; height: 200px; border: 1px solid green;">
    </div>
</body>

Javascirpt:

          function init() {
            var goodsList = getElementsbyClassName('goods');
            var box = document.getElementById('box');
            for (var i = 0; i < goodsList.length; i++) {
                goodsList[i].addEventListener('dragstart', function (ev) {
                    var dt = ev.dataTransfer;
                    dt.effectAllowed = 'all';
                    dt.setData('text/plain', this.textContent);
                }, false);
            }
            box.addEventListener('dragend', function (ev) {
                ev.preventDefault();
            }, false);
            box.addEventListener('drop', function (ev) {
                var dt = ev.dataTransfer;
                var goodsName = dt.getData('text/plain');
                box.textContent += goodsName;
                ev.preventDefault();
                ev.stopPropagation();
            }, false);
        }

解释下上面的代码：

1.获取class为goods的元素，在dragstart的时候，将自己本元素的textContext传递给dataTransfer（下面会说明dataTransfer对象的作用）；

2.在将goods拖动到box时候，获取dataTransfer数据，并显示出来；

3.preventDefault的作用是，对于目标元素，默认的情况下是不允许接收元素的，所以必须在dragend或则dragover事件内调用preventDefault。

关于DataTransfer对象

我们通过上面的例子知道拖动时是通过DataTransfer来进行拖动元素之间的数据传递的，同时我们也可以通过设置DataTansfer里面的相关属性来实现一些拖动的额外效果。下面看下DataTransfer的属性与方法：

属性/方法 作用
dropEffect属性 拖放操作的视觉效果，可以指定为none、copy、link、move
effectAllowed属性 指定当元素被拖放时所允许的视觉效果
types属性 存入数据的种类
cleraData(DomString format) 清楚DataTransfer对象中存放的数据
setData(DOMString format,DomString data) 存入数据
DOMString getData(DOMString format) 从DataTransfer对象中读取数据
setDragImange(Element image，long x,long y) 用img元素来设置拖放图标

这里有几个要说明的：

1.现在拖动处理所支持的MIME类型为以下几种：

text/plain:文本文字；

text/html:HTML文字；

text/xml:xml；

text/uri-list:url列表。

对于dropEffect、effectAllowed属性使用的几个注意的地方：

一般的时候我们在ondragstart事件中去设置effectAllowed值，在ondragover事件中指定dropEffect值。其中如果effectAllowed属性设置为none，则不允许拖动，如果dropEffect属性设置为none，则不允许拖放到目标元素中。

总结

通过本篇Post，了解了Html5中拖放的新的API，比起html4实现起来要简单很多。下面的文章会继续一步步学习Html5其他方面的相关特性。