转载:H5 拖放(Drag & Drop)

一、拖放

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放

二、浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释:在 Safari 5.1.2 中不支持拖放。

三、属性介绍

0、代码示例


<!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>

1、draggable

设置元素为可拖放。

首先,为了使元素可拖动,把 draggable 属性设置为 true :


<img draggable="true" />

2、ondragstart

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:


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

在这个例子中,数据类型是 “Text”,值是可拖动元素的 id (“drag1”)。

3、ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。这要通过调用ondragover 事件的 event.preventDefault() 方法:


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

4、ondrop

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

在上面的例子中,ondrop 属性调用了一个函数,drop(event):


function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
  • 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
  • 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id (“drag1”)
  • 把被拖元素追加到放置元素(目标元素)中

四、属性生命周期

重点,记一下:

生命周期属性描述
拖动开始ondragstart在拖动操作开始时执行脚本(对象是被拖拽元素)
拖动过程中ondrag只要脚本在被拖动就允许脚本(对象是被拖拽元素)
拖动过程中ondragenter当元素被拖动到一个合法的放置目标时,执行脚本(对象是目标元素)
拖动过程中ondragover只要元素正在合法的放置目标上拖动时,就执行脚本(对象是目标元素)
拖动过程中ondragleave当元素离开合法的放置目标时(对象是目标元素)
拖动结束ondrop将被拖拽元素放在目标元素内时运行脚本(对象是目标元素)
拖动结束ondragend在拖动操作结束时运行脚本(对象是被拖拽元素)

被拖拽的元素,执行相关的属性方法:


<span  
      id="dragId"
      draggable="true"                              // 设置元素可拖动
      ondragstart="handleDragStart(this, event)"    // 拖动开始时
      ondrag="handleDrag(this, event)"              // 开始拖动
      ondragend="handleDragEnd(this, event)">       // 拖动结束时
    <img src="../images/dragImg.png">
</span>

目标元素,执行相关的属性方法:


<div
     id="targetId"
     ondragenter="handleDragEnter(this, event)"     // 当元素被拖动到一个合法的放置目标时
     ondragover="handleDragOver(this,event)"        // 只要元素正在合法的放置目标上拖动时
     ondragleave="handleDragLeave(this, event)"     // 当元素离开合法的放置目标时
     ondrop="handleDrop(this, event)">              // 将被拖拽元素放在目标元素内时
</div>

五、dataTransfer

参考链接:DataTransger

1、成员列表

属性描述
dropEffect设置或获取拖拽操作的类型和要显示的光标类型。
effectAllowed设置或获取数据传送操作可应用于该对象的源元素。
方法描述
clearData通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。
getData通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据。
setData以指定格式给 dataTransfer 或 clipboardData 对象赋予数据。

2、解析

dataTransfer 对象使得自定义处理拖拽操作成为可能。你可通过 event 对象完成这种功能。

dataTransfer 对象可于源对象和目标对象中使用。

典型用法是,setData 方法用于源事件,以便提供关于将要进行传送的数据的数据。

相应的,getData 方法用于目标事件以便确保获取的数据和数据格式。

参考资料


https://developer.mozilla.org/en-US/docs/Web/Events/dragstart
https://www.jb51.net/shouce/dhtml/objects/obj_datatransfer.html
--
http://www.w3school.com.cn/html5/html_5_draganddrop.asp
https://www.cnblogs.com/ijjyo/p/4300717.html
https://blog.csdn.net/qq_37111953/article/details/78278048

作者:wangjianuo
链接:https://www.jianshu.com/p/9d3e5a7b4312
来源:简书

Leave a Comment

Your email address will not be published.

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

鲁ICP备14011120号