js特效拖拽

js 特效拖拽

在这里插入图片描述

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div{
            width: 100px;
            height: 100px;
            background-color: blue;
            position:absolute;
            top: 20px;
            left: 300px;
        }
    </style>
</head>
<body>
    <div id = "div"></div>
 
    <script type="text/javascript">
        var muvDiv = document.getElementById('div');
        muvDiv.onmousedown = function(){
            // 1.鼠标位置减去盒子位置，获取差值
            var ol = event.clientX - muvDiv.offsetLeft;
            var ot = event.clientY - muvDiv.offsetTop;
 
            document.onmousemove = function(){
                var event = event || window.event;
                // 2.获取当前鼠标位置，减去差值，求出准确位置
                var top = event.clientY - ot;
                var left = event.clientX - ol;
                // 3.给css获取新值
                muvDiv.style.top = top + 'px';
                muvDiv.style.left = left + 'px';
            }
        }
 
        // 4.清除onmousemove函数
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    </script>
</body>
</html>

上一篇vue "keyId=xxxxx&keyId=xxxxx&keyId=xxxxx" 传值办法

下一篇mysql 数据库迁移办法

本文作者：轻风细雨_林木木

本文链接：https://www.cnblogs.com/linzhifen5/p/16961385.html

posted @ 2022-12-06 22:21 轻风细雨_林木木阅读(36) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

轻风细雨_林木木

做最优秀的自己。

js特效拖拽

公告

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#div{
	width: 100px;
	height: 100px;
	background-color: blue;
	position:absolute;
	top: 20px;
	left: 300px;
	}
	</style>
	</head>
	<body>
	<div id = "div"></div>

	<script type="text/javascript">
	var muvDiv = document.getElementById('div');
	muvDiv.onmousedown = function(){
	// 1.鼠标位置减去盒子位置，获取差值
	var ol = event.clientX - muvDiv.offsetLeft;
	var ot = event.clientY - muvDiv.offsetTop;

	document.onmousemove = function(){
	var event = event \|\| window.event;
	// 2.获取当前鼠标位置，减去差值，求出准确位置
	var top = event.clientY - ot;
	var left = event.clientX - ol;
	// 3.给css获取新值
	muvDiv.style.top = top + 'px';
	muvDiv.style.left = left + 'px';
	}
	}

	// 4.清除onmousemove函数
	document.onmouseup = function(){
	document.onmousemove = null;
	}
	</script>
	</body>
	</html>