HTML5拖放API

本文由清尘发表于2018-05-03 14:43最后修改于2018-05-09属于HTML/CSS分类

在HTML 5中要想实现拖放操作,至少需要经过如下两个步骤:
1)将想要拖放的对象元素的draggable属性设为true (draggable=”true”)。这样才能拖放该元素。另外,img元素与a元素(必须指定href)默认允许拖放。
2)编写与拖放有关的事件处理代码。关于拖放存在如表中所示的几个事件。

weread_image_15274191330595

<body onload="init()">

<div id="dragme" draggable="true" style="width: 200px; border:1px solid gray;">请拖放</div>
<div id="text" style="width:200px; height: 200px; border: 1px solid gray;"></div>
</body>
function init()
{
        var source = document.getElementById("dragme");
        var dest = document.getElementById("text");
        // (1) 拖放开始
        source.addEventListener("dragstart", function(ev)
        {
            // 向dataTransfer对象追加数据
            var dt = ev.dataTransfer;
            dt.effectAllowed = 'all';
          // (2) 拖动元素为dt.setData("text/plain", this.id);
            dt.setData("text/plain", "你好");
        }, false);
        // (3) dragend:拖放结束
        dest.addEventListener("dragend", function(ev)
        {
            // 不执行默认处理(拒绝被拖放)
            ev.preventDefault();
        }, false);
        // (4) drop:被拖放
        dest.addEventListener("drop", function(ev)
        {
            // 从DataTransfer对象那里取得数据
            var dt = ev.dataTransfer;
        var text = dt.getData("text/plain");
        dest.textContent += text;
        // (5) 不执行默认处理(拒绝被拖放)
        ev.preventDefault();
        // 停止事件传播
        ev.stopPropagation();
    }, false);
}
// (6) 设置页面属性,不执行默认处理(拒绝被拖放)
document.ondragover = function(e){e.preventDefault();};
document.ondrop = function(e){e.preventDefault();};

TIM截图20180509144431

❑开始拖动(dragstart事件发生)时,把要拖动的数 据 存 入DataTransfer对 象(setData()方 法)。DataTransfer对象专门用来存放拖放时要携带的数据,可以被设置为拖动事件对象的dataTransfer属性。setData方法中的第一个参数为表示携带数据的数据种类的字符串,第二个参数为要携带的数据。第一个参数中的表示数据种类的字符串里只能填入类似“text/plain”或“text/html”这样的表示MIME类型的文字,不能填入其他文字。
❑如果把“dt.setData(”text/plain” “, 你好”); ?”改为“dt.setData(”text/plain”, this.id); ”,因为把被拖动元素的id作为了参数,浏览器在使用getData()方法读取数据时会自动读取该元素中的数据,所以携带的数据就是被拖动元素中的数据了。
❑针对拖放的目标元素,必须在dragend或dragover事件内调用“事件对象.prevent-Default()”方法。因为默认情况下,拖放的目标元素是不允许接受元素的,为了把元素拖放到其中,必须关闭默认处理。
❑目标元素接受到被拖放的元素后,执行getData()方法从DataTransfer那里获得数据。getData()方法的参数为setData()方法中指定的数据种类,本例中为“text/plain”。
❑要实现拖放过程,还必须在目标元素的drop事件中关闭默认处理(拒绝被拖放),否则目标元素不能接受被拖放的元素。
❑要实现拖放过程,还必须设定整个页面为不执行默认处理(拒绝被拖放),否则拖放处理也不能实现。因为页面是先于其他元素接受拖放的,如果页面上拒绝拖放,那么页面上其他元素就都不能接受拖放了。
❑要使元素可以被拖放,首先必须把该元素的draggable属性设为true。另外,为了让这个示例在所有支持拖放API的浏览器中都能正常运行,需要指定“-webkit-user-drag: element”这种Webkit特有的CSS属性。
因为这个示例中的数据种类使用了“text/plain”这个MIME类型,也可以从其他使用同样MIME类型的应用程序中把该类型的数据拖动到目标元素中。
现在支持拖动处理的MIME的类型包括以下几种。
● text/plain:文本文字。
● text/html:HTML文字。
● text/xml:XML文字。
● text/uri-list:URL列表,每个URL为一行。

DataTransfer对象的属性与方法

用好DataTransfer对象的属性和方法,可以实现定制拖放图标,只支持特定拖放(如复制、移动等),甚至可以实现更复杂的拖放操作。表简单列举了DataTransfer对象的属性与方法

weread_image_15836893810316

设定拖放时的视觉效果

dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示当一个元素被拖动时所允许的视觉效果,一般在ondragstart事件中设定,可以指定该属性的属性值如表所示
weread_image_15836893810316

DataTransfer对象的dropEffect属性表示实际拖放时的视觉效果,一般在ondragover事件中指定,允许设定的值为none、copy、link、move。dropEffect属性所表示的实际视觉效果必须与effectAllowed属性值所表示的允许操作相匹配,规则如下所示。
❑如果effectAllowed属性设定为none,则不允许拖放元素。
❑如果dropEffect属性设定为none,则不允许被拖放到目标元素中。
❑如果effectAllowed属性设定为all或不设定,则dropEffect属性允许被设定为任何值。
❑如果effectAllowed属性设定为具体操作,而dropEffect属性也设定了具体视觉效果,则dropEffect属性值必须与effectAllowed属性值相匹配,否则不允许将被拖放元素拖放到目标元素中。
以下是对effectAllowed属性及dropEffect属性进行设定的代码片段,完整代码参考上例。

source.addEventListener("dragstart", function(ev)
{
        var dt = ev.dataTransfer;
        // 设定effectAllowed属性
        dt.effectAllowed = 'copy';
        dt.setData("text/plain", "你好");
}, false);
dest.addEventListener("dragover", function(ev)
{
        var dt = ev.dataTransfer;
          // 设定dropEffect属性
        dt.dropEffect = 'copy';
        ev.preventDefault();
      }, false);

自定义拖放图标

除了上面所说的使用effectAllowed属性与dropEffect属性外,在HTML 5中还允许自定义拖放图标,该图标是指在用鼠标拖动元素的过程中,位于鼠标指针下部的小图标。
上面提到DataTransfer对象有一个setDragImage方法,该方法有三个参数,第一个参数image是设定为拖放图标的图标元素,第二个参数x为拖放图标离鼠标指针的X轴方向的位移量,第三个参数y为拖放图标离鼠标指针的y轴方向的位移量。
以下是调用setDragImage方法的代码片段,其余代码参考前面的示例。

// 创建图标元素
var dragIcon = document.createElement('img');
// 设定图标来源
dragIcon.src='图片url';
source.addEventListener("dragstart", function(ev) {
        var dt = ev.dataTransfer;
        // 设定自定义图标
        dt.setDragImage(dragIcon, -10, -10);
        dt.setData("text/plain","aaa");
}, false);