HTML5新属性draggable拖拉元素简单实验

最新推荐文章于 2022-12-02 16:38:55 发布

Ouch!

最新推荐文章于 2022-12-02 16:38:55 发布

阅读量623

点赞数

分类专栏： web相关文章标签： html5 javascript css 前端

本文链接：https://blog.csdn.net/o_u_c_h/article/details/121620353

版权

web相关专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML5新属性draggable拖拉元素简单实验

代码
事件

学习链接: draggable-MDN
学习链接: 拖放API-MDN
学习链接: draggable 属性-W3School

HTML5新属性draggable，目前只有 Firefox、Chrome 以及 Safari 和以其为内核的浏览器支持 draggable 属性，并且与之相关还有7个事件。

本实验拖放示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5-拖拽</title>
    <style>
        .box{
			width: 100px;
			height: 100px;			
			background-color: #1B6D85;
			position: absolute;
			border-radius: 50%;
			cursor: grab;
		}
		
    </style>
</head>
<body>
    <div id="box" class="box" draggable="true" style="left: 300px;top: 200px;">
        
    </div>
	
    <script>
		// 源对象： 被拖拽的元素
		// 目标元素： 源对象当前所处的区域
		//e 指代的都是 拖拽事件...
		/*
		被拖动的源对象可以触发的事件： 都是e.target
		(1)ondragstart：源对象开始被拖动		
		(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)		
		(3)ondragend：源对象被拖动结束
		
		  拖动源对象可以进入到上方的目标对象可以触发的事件：		
		(1)ondragenter：目标对象被源对象拖动着进入		
		(2)ondragover：目标对象被源对象拖动着悬停在上方		
		(3)ondragleave：源对象拖动着离开了目标对象		
		(4)ondrop：源对象拖动着在目标对象上方释放/松手
		
		*/
		// 改变元素offsetLeft offsetTop
		
		let box = document.getElementById('box');
		// offsetHeight 元素高度 .. offsetTop偏移！
		let oriOffsetLeft;			
		let oriOffsetTop;
		let oriClientX ,oriClientY,newClientX,newClientY;
		// 源对象开始拖动
		box.ondragstart = function(e){
			oriOffsetLeft = box.offsetLeft;
			oriOffsetTop = box.offsetTop;
			oriClientX = e.clientX;
			oriClientY = e.clientY;
			
		}
			
		// 拖动中
		box.ondrag = function(e){
			newClientX = e.clientX;
			newClientY = e.clientY;			
		}
		
		// 拖动结束
		box.ondragend = function(e){			
			let rLeft = parseInt(newClientX) - parseInt(oriClientX) + parseInt(oriOffsetLeft); 
			let rTop = parseInt(newClientY) - parseInt(oriClientY) + parseInt(oriOffsetTop);
			if(rLeft<=0){
				rLeft = 0;
			}
			if(rLeft>= (window.innerWidth-box.offsetWidth)){
				rLeft = (window.innerWidth-box.offsetWidth);
			}
			if(rTop<=0){
				rTop = 0;					
			}
			if(rTop>= (window.innerHeight-box.offsetHeight)){
				rTop = (window.innerHeight-box.offsetHeight);
			}
			
			box.style.left = rLeft.toString() + 'px';
			box.style.top = rTop.toString() + 'px';
		}			
    </script>
</body>
</html>

事件

学习链接: 拖放API-MDN

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