当拖拽元素时遇到的各种问题，以及解决方法

最新推荐文章于 2024-01-16 21:39:28 发布

阮太太

最新推荐文章于 2024-01-16 21:39:28 发布

阅读量1.5k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_38409767/article/details/100107394

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>设置整个页面的元素都能拖动</title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#box2 {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var box1 = document.getElementById("box1");
				var box2  = document.getElementById("box2")
               drag(box1);
			};
			/*
			 * 提取一个专门用来设置拖拽的函数
			 * 参数：开启拖拽的元素
			 */
			function drag(obj){
				//				1.鼠标点击要拖动的东西 onmousedown
				//				2.鼠标带着拖动的东西移动 onmousemove
				//				3.鼠标松开停止拖动  onmouseup
				
				obj.onmousedown = function(event){
					//看（测试.html）文件后明白原因，并设置box1的鼠标触发事件，如果不设置&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阮太太

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
当拖拽元素时遇到的各种问题，以及解决方法

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>设置整个页面的元素都能拖动</title> <style type="text/css"> #box1 { width: 100px; height: 100...
复制链接

扫一扫