HTML5的拖拽总结

. . . . .

已于 2023-10-24 11:18:02 修改

阅读量300

点赞数 1

分类专栏： HTML5 文章标签： html5 前端 html 1024程序员节

于 2019-06-22 11:16:18 首次发布

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/93300807

版权

HTML5 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

在拖拽的世界里，元素被分为2类，一类是被拖拽元素，一类是目标元素，即想把被拖拽的元素拖到哪里。

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

拖拽主要过程：

把被拖拽的元素设置成可拖拽，即属性值draggable=true。
在被拖拽的元素上添加dragstart事件，在开始拖放被拖放元素时触发。
在目标元素上添加drop事件，在目标元素完全接受被拖放元素时触发。

示例：

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            #div1 {width:250px; height:250px;padding:10px;border:1px solid #aaaaaa;}
            img {
            	width: 200px;
            	height: 200px;
            }
        </style>
        <script type="text/javascript">
            
			function drag_start(ev)
			{
				console.log('drag_start')
				ev.dataTransfer.setData("Text",ev.target.id);
			}

			function drag(ev)
			{
				console.log('drag')
			}

			function drag_end(ev)
			{
				console.log('drag_end')
			}


			function drag_enter(ev) 
			{
				console.log('drag_enter')
			}

			function drag_over(ev)
			{

				console.log('drag_over')
				ev.preventDefault();
			}

			function drag_leave(ev)
			{
				console.log('drag_leave')
			}
			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")
			* 把被拖元素追加到放置元素（目标元素）中
			*/

        </script>
    </head>
    <body>
        <p>
            请把图片拖放到矩形中：
        </p>
        <div id="div1" ondragenter="drag_enter(event)" ondragleave="drag_leave(event)" ondragover="drag_over(event)" ondrop="drop(event)">
        </div>
        <br/>
        <img draggable="true" id="drag1" ondragstart="drag_start(event)" ondrag="drag(event)" ondragend="drag_end(event)" src="./04.jpg"/>
    </body>
</html>

面试题：说一下HTML5 drag api

参考回答：

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

参考链接：https://blog.csdn.net/weixin_41910848/article/details/82218243

除了Event事件，在拖拽系统中还有DragEvent事件

在这里插入图片描述

dataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。

dataTransfer：https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer

通过引用计数解决移入一下，触发多次onDragEnter问题

移入一次，onDragEnter可能会触发多次。如何解这个问题呢？通过引用计数

onDragEnter(e) {
    const targetNode = getTarget(rowCls, e.target);
    targetNode[COUNT] = (targetNode[COUNT] || 0) + 1;
    setDragCls(targetNode, 'add');
},
onDragOver(e) {
    e.preventDefault();
},
onDragLeave(e) {
    const targetNode = getTarget(rowCls, e.target);
    if (--targetNode[COUNT] === 0) {
        setDragCls(targetNode, 'remove');
    }
}

. . . . .

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML5的拖拽总结

在拖拽的世界里，元素被分为2类，一类是被拖拽元素，一类是目标元素，即想把被拖拽的元素拖到哪里。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。拖拽主要过程：把被拖拽的元素设置成可拖拽，即属性值draggable=true。在被拖拽的元素上添加dragstart事件，在开始拖放被拖放元素时触发。在目标元素上添加drop事件...
复制链接

扫一扫