Linux
Nginx
数据库
Python
PHP
C#
.NET
WPF
MAUI
Blazor
WinForm
帝国CMS
AKCMS
Typecho
织梦CMS
Visual Studio
Windows
Mac
Web前端
数据采集
运营
产品
摩托车
电影
杂事
<div id="move">Hello World！</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#move').on('mousedown', function(e) { //鼠标按下
// 判断一下这个按下是点击还是拖动
var isClick = true;
$(document).on('mousemove', (e) => {//鼠标移动
let left = e.clientX - $(this).width() / 2//计算元素left值
let top = e.clientY - $(this).height() / 2//计算元素top值
top = suan(top, 0, $(document).innerHeight() - $(this).height())//调用封装的方法
left = suan(left, 0,$(document).innerWidth() - $(this).width())//调用封装的方法
$(this).css({ //给盒子设置坐标
left,
//拖动后，把isClick设为false，后面就不会执行点击事件
isClick = false;
e.preventDefault();
$(document).on('mouseup', (e) => {//鼠标抬起
//当isClick为true时，就执行点击事件
if( isClick ){
msgboxurl()
$(document).off('mousemove mouseup')//移除鼠标移动、鼠标抬起事件
function suan(o, min, max) { //重复封装
o < min ? o = min : o > max ? o = max : ''//限制出界
return o
function msgboxurl(){
alert("点击效果");
</script>
</html>
本文作者：董川民
信息来源：
本站原创 禁止转载
所属分类：
Web前端
上一篇：
C#版本、.NET版本、Visual Studio版本对应关系
下一篇：
SQL Server迁移数据库文件(ldf&mdf文件)到其他盘
Power by Typecho. Theme by Puma. Written by 董川民-
独立开发者
渝ICP备16006207号-2
渝公网安备 50011202503233号
友情链接：
