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 ...
随机推荐
- 「雕爷学编程」Arduino动手做（28）——RGB全彩LED模块
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...
- OGG FOR BigData(Hive) GoldenGate 性能测试
版本信息: Oracle GoldenGate Command Interpreter Version 12.2.0.1.160419 OGGCORE_12.2.0.1.0OGGBP_PLATFORM ...
- 7.2 Go type assertion
7.2 Go type assertion 类型断言是使用在接口值上的操作. 语法x.(T)被称为类型断言,x代表接口的类型,T代表一个类型检查. 类型断言检查它操作对象的动态类型是否和断言类型匹配. ...
- sql语句 怎么从一张表中查询数据插入到另一张表中？
sql语句 怎么从一张表中查询数据插入到另一张表中? ----原文地址:http://www.phpfans.net/ask/MTc0MTQ4Mw.html 比如我有两张表 table1 字段 un ...
- Ajax长轮询(LongPoll)
1)HTML HTTP是无状态.单向的协议,用户只能够通过客服端向服务器发送请求并由服务器处理发回一个响应.若要实现聊天室.WEBQQ.在线客服.邮箱等这些即时通讯的应用,就要用到“ 服务器推送技术( ...
- vue仿移动端输入框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 这个Maven依赖的问题，你敢说你没遇到过
Maven 依赖没处理好的话经常会导致发生一些问题,非常烦.今天给大家分享一个依赖相关的问题,说不定你之前就遇到过. 问题背景 有个 ES 搜索的项目,刚开始还是好好的状态,过了一段时间,然后就发现启 ...
- css 图片宽度、居中、倒影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS 风车（花瓣）旋转动画圆角
这是一个综合的案例,用到了transition(动画,动作在单位时间内完成),transform(旋转),border-radius(圆角),absolute(定位),linear-gradient( ...
- discuz mlv3.x命令注入
本次漏洞是由于Discuz! ML对于cookie字段的不恰当处理造成的cookie字段中的language参数未经过滤,直接被拼接希尔缓存文件中,而缓存文件随后被加载,造成代码执行. 共有60出利用 ...