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 ...
随机推荐
- spark机器学习从0到1介绍入门之(一）
一.什么是机器学习 机器学习(Machine Learning, ML)是一门多领域交叉学科,涉及概率论.统计学.逼近论.凸分析.算法复杂度理论等多门学科.专门研究计算机怎样模拟或实现人类的学习行 ...
- hdu5687 字典树
hdu5687 #include <bits/stdc++.h> using namespace std; , n = ; struct node { ]; int cnt; void i ...
- java中的上下问解释以及ServletContext介绍使用
摘抄的:所谓上下文,它是用来存储系统的一些初始化信息,例如在jboss中通过配置文件指定了数据源,那么在jboss启动的时候就把这个文件的相关信息上下文中,于是在我们使用这个数据源的时候,就需要先获得 ...
- 最优化之凸优化之Bregman算法
本文介绍了Bregman迭代算法,Linearized Bregman算法(及在求解Basis Pursuit问题中的应用)和Split Bregman算法(及在求解图像TV滤波问题中的应用). 由于 ...
- Excel日期转换为PHP时间戳
PHP 的时间函数是从1970-1-1日开始计算的,单位是秒数.但是 EXCEL的是从1900-1-1日开始算的单位是天数. 如果只计算1970以后的时间的话,就好处理了. 先获得 EXCEL中 19 ...
- 一,初次接触html+css需要注意的小问题
不足之处请不吝赐教,在评论区帮忙补充 html最基础的,入门学习的是标签,常用的标签有<a> 定义锚.<b> 定义粗体字.<br> 单 ...
- ELK-日志管理平台
elk日志收集工具 1.日志在工作当中的重要性 1 分析日志的意义: 2 1.分析日志监控系统运行的状态 3 2.分析日志来定位程序的bug 4 3.分析日志监控网站访问流量 ...
- 如何下载xshell家庭版
xshell是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议,加上友好炫酷的操作界面,深受广大码农的喜爱,是后端开发程序猿操 ...
- ATX-UI自动化环境搭建
基础环境准备(以下都是在Mac机上搭建的) 1.android sdk安装&配置 很完美的一个资源下载网:tools.android-studio.org,下载所需的包(我下的zip包直接解压 ...
- win服务器管理系统全面升级，教您如何成为运维达人
作为服务器运维人员都知道,日常检查服务器问题并处理问题几乎占据了所有时间,检查服务器的繁琐也只有他们自己能体会,这些外界看似的“工作本分职责”,真是有苦难言.为此我专门研究了市面上三款主打的服务器管理 ...