div在屏幕任意位置拖动

主要就是三点：

1，获取鼠标按下时的位置；
2，获取鼠标移动后的位置；
3，两者相减就是div的位置；

js代码如下：

// 获取屏幕的高宽度
let cw = $(window).width();
let ch = $(window).height();
// 鼠标按下时获取鼠标在屏幕的位置
$(".box").mousedown(function(e){e = e || window.event;// 获取鼠标在元素上的位置（鼠标按下时在元素上得位置）let X = e.clientX - $(".box").offset().left;let Y = e.clientY  - $(".box").offset().top;$(".box").mousemove(function(e){console.log(cw ,ch);e = e || window.event;let x = e.clientX - X;let y = e.clientY - Y;if(x<0)x=0;if(y<0)y=0;if(x + $('.box').width() > cw)  x = cw-$('.box').width();if(y +$('.box').height() > ch)  y = ch-$('.box').height();$('.box').css({'left':x,'top':y})})
});
// 鼠标抬起事件
$(document).mouseup(function(){$(".box").unbind("mousemove")
})

div在屏幕任意位置拖动相关推荐

div内图片和文字水平垂直居中且在屏幕任意位置
有这样一个需求: 要求将文字与icon作为一个盒子,盒子内文字与icon水平垂直居中,且盒子可以放在屏幕的任意位置:比如左侧或者右侧或者居中,且具有响应式的特点. 思路如下: 首先,用一个div包裹两 ...
vue中使用html5的drag实现任意位置拖动
最近做的一个项目,需要拖动配置,网上找了一圈没找到合适的轮子,没办法自己写吧,代码中有能优化的地方,没时间优化了(其实就是懒得),希望能帮到需要的人. 效果图如下: 可以充设备组件拖动到右侧容器中, ...
Android在屏幕任意位置显示对话框
为什么80%的码农都做不了架构师?>>> 下面是设置对话框x的偏移量. int marginLeft = 100;Window window = getDialog().get ...
Swift 3 点击屏幕任意位置隐藏键盘
func hideKeyboardWhenTappedAround() {let tap: UITapGestureRecognizer = UITapGestureRecognizer(target ...
在屏幕的任意位置拖拽，控制精灵移动
本文首发于微信公众号: 小蚂蚁教你做游戏.欢迎关注领取更多学习做游戏的原创教程资料,每天学点儿游戏开发知识. 嗨!大家好,我是小蚂蚁. 最近一直在录制视频教程,很少写图文教程,难免有些生疏.一项技能练 ...
VC/MFC拖动窗口任意位置移动窗口
除了拖动标题栏移动窗口以外,我们也可以拖动窗口任意位置(除控件)位置而使对话框移动. 这里只讲述基于对话框的程序 class c**dlg:public CDialog { //Constructio ...
C语言在屏幕的任意位置输出字符
初学编程的读者,肯定很想编写出一个游戏来秀一下,贪吃蛇就是C语言小游戏中经典的一个,本教程的目标也是带着大家做出这款游戏,你可以猛击<C语言贪吃蛇游戏演示和说明>了解更多. 编写游戏的第一 ...
jquery 插件任意位置浮动固定层
-------------------------------------jquery.floatDiv.js--------------------------------------------- ...
vue 拖拽元素到任意位置
vue 拖拽元素到任意位置使用vue-drag-it-dude组件 npm install vue-drag-it-dude --save 参考地址:https://github.com/xzqyu ...

div在屏幕任意位置拖动

div在屏幕任意位置拖动

div在屏幕任意位置拖动相关推荐

最新文章

热门文章