jQuery实现拖拽元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
cursor: move;
} * {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>dsgsad</div>
<div>dsgsad</div>
<div>dsgsad</div>
<div>dsgsad</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('div').on('mousedown', function(e) { //鼠标按下
$(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,
top
})
e.preventDefault();
})
$(document).on('mouseup', (e) => {//鼠标抬起
$(document).off('mousemove')//移除鼠标移动事件
})
})
function suan(o, min, max) { //重复封装
o < min ? o = min : o > max ? o = max : ''//限制出界
return o
}
</script>
</html>
jQuery实现拖拽元素的更多相关文章
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- juqery 拖拽元素
转自 http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...
- jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
- jQuery 鼠标拖拽排序
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- 简单的JQuery完美拖拽
首先导入jq库,最好是1.0版本的.调用函数时,传入要拖拽元素的id值. function drag(sel){ $div = $("#"+sel); $div.mousedown ...
- 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...
- H5 拖拽元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Django之forms.Form
django中的form组件提供了普通表单提交及验证数据的主要功能: 1. 生成页面可用的HTML标签 2. 对用户提交的数据进行验证 3. 可保留用户上次提交的数据 django中 ...
- orcle报错：ORA-12737:Instant Client Light:unsupported server character set ZHS16GBK
我们用Navacat连接Oracle数据库的时候,会提示ORA-12737:Instant Client Light:unsupported server character set ZHS16GBK ...
- js得到文件后缀
js得到文件后缀 http://www.cnblogs.com/lan0725/archive/2010/05/25/1873745.html function getFileExt(str) { ...
- 论文阅读：Reducing Transformer Depth On Demand With Structured Dropout
Introduction 这篇paper是做Transformer压缩的,但其实bert的核心也就是transformer,这篇paper的实验里也做了bert的压缩.作者的主要工作是提出了Layer ...
- mysql 赋权语句
grant all privileges on phplampDB.* to phplamp@localhost identified by '1234';
- CentOS下搭建Git服务器
1.首先需要安装Git,可以使用yum源在线安装: [root@localhost Desktop]# yum install -y git 2.创建一个git用户,用来运行git服务 # addus ...
- 深入理解JS：执行上下文中的this（一）
目录 执行上下文与执行上下文栈 this 全局环境 函数环境 总结 参考 1.执行上下文与执行上下文栈 (1)什么是执行上下文? 在 JavaScript 代码运行时,解释执行全局代码.调用函数或使用 ...
- template标签介绍和使用
template标签介绍和使用 1.介绍:template标签是html5新出来的标签,具有3个特点,(1)随意性:可以写在页面中的任何地方.(2)不可见性:它里面的元素都是不可见的.(3)页面也不会 ...
- 9.快照持久化和AOF持久化
持久化功能redis为了内部数据的安全考虑,会把本身的数据以文件形式保存到硬盘中一份,在服务器重启之后会把硬盘中的数据恢复到内存(redis)的里边. 数据保存到硬盘的过程就称为“持久化”效果. re ...
- [软件版本贴]SD.TEAM软件集
手机轰炸机-版本:v1.0.下载地址:http://pan.baidu.com/1.zip! 营销软件盒-版本:v1.0.下载地址:http://pan.baidu.com/2.zip! 不加群提取群 ...