web前端：拖拽+案例+详解

最新推荐文章于 2024-02-17 09:28:20 发布

前端嘻嘻哥

最新推荐文章于 2024-02-17 09:28:20 发布

阅读量1.4k

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/xixi1811/article/details/128417119

版权

web前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

拖拽事件

事件	On 型事件处理程序	触发时刻
drag	ondrag	当拖拽元素或选中的文本时触发。
drop	ondrop	当元素或选中的文本在可释放目标上被释放时触发。
dragenter	ondragenter	当拖拽元素或选中的文本到一个可释放目标时触发。
dragover	ondragover	当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。
dragleave	ondragleave	当拖拽元素或选中的文本离开一个可释放目标时触发。
dragstart	ondragstart	当用户开始拖拽一个元素或选中的文本时触发。
dragend	ondragend	当拖拽操作结束时触发（比如松开鼠标按键或敲 “Esc” 键）。

案例+详解


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽事件</title>
		<style>
			div{
				width: 262px;
				height: 46px;
				padding: 15px;
				border: 2px solid #aaaaaa;
			}
		</style>
	</head>
	<body>
		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            //draggable="true"当前元素可被拖动
			<img id="logo" src="img/logo.jpg" draggable="true" ondragstart="drag(event)" width="262" height="46">
		</div>
		<br />
		<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<script>
			function allowDrop(ev) {
                //阻止浏览器默认行为，使浏览器可以被拖拽
               	 ev.preventDefault();
		    }
            function drag(ev) {
                //获取页面的图图片并储存起来
                //text/plain数据类型
                //ev.target.id值
                ev.dataTransfer.setData("text/plain", ev.target.id);
	        }
            function drop(ev) {
                ev.preventDefault();
                //通过类型获取值
                var id = ev.dataTransfer.getData("text/plain");
                //将图片追加到当前元素的子元素中
                //target当前元素本身
                ev.target.appendChild(document.getElementById(id));
	        }
        </script>
    </body>
</html>