方块拖拽（原生js）

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

柠檬！不萌

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

阅读量378

点赞数 2

分类专栏： javascript 文章标签： js javascript html

本文链接：https://blog.csdn.net/qq_40654804/article/details/114711588

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>方块拖拽</title>
		<style type="text/css">
			#box {
				width: 100px;
				height: 100px;
				background-color: #FF7F50;
				position: absolute;
				text-align: center;
			}

			#box2 {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 200px;
				top: 200px;
				position: absolute;
			}
		</style>
		<script>
			/**
			 * 拖拽流程：
			 * 		1、当鼠标在被拖拽元素上按下时，开始摇拽    onmousedown
			 * 		2、当鼠标移动时被拖拽元素跟随元素鼠标移动  onmousemove
			 * 		3、当鼠标松开时，被拖拽元素固定在当前位置  onmouseup
			 */
			window.onload = function() {
				var box = document.getElementById("box");
				var box2 = document.getElementById("box2");

				drag(box);
				drag(box2);
			}

			function drag(obj) {
				obj.onmousedown = function(event) {
					/**
					 * 针对（**）IE8不支持解决方法
					 * 	setCapture()
					 * 	  - 该方法只支持IE，但是在火狐中调用时不会报错
					 * 		chrome中会报错
					 */

					box.setCapture && box.setCapture();

					event = event || window.event;
					var le = event.clientX - obj.offsetLeft;
					var to = event.clientY - obj.offsetTop;

					document.onmousemove = function(event) {
						event = event || window.event;

						var left = event.clientX - le;
						var top = event.clientY - to;

						obj.style.left = left + "px";
						obj.style.top = top + "px";
					};

					document.onmouseup = function() {
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
						obj.releaseCapture && obj.releaseCapture();
						
					};

					/**
					 * 拖拽网页中内容，尤其是文字或图片，浏览器会自动搜索，此时会有拖拽功能异常
					 * 这是浏览器自动行为，若不需要，需要取消（**）
					 * IE8不支持
					 */

					return false;
				};
			}
		</script>
	</head>
	<body>
		<div id="box">可拖拽</div>
		<div id="box2"></div>
	</body>
</html>

柠檬！不萌

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
方块拖拽（原生js）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>方块拖拽</title> <style type="text/css"> #box { width: 100px; height: 100px; background-color: #FF7F50; position: absolute; t...
复制链接

扫一扫