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 ...
随机推荐
- vue组件试错
[Vue warn]: Property or method "child1" is not defined on the instance but referenced duri ...
- js 简单有效判断日期有效性（含闰年）
原文:https://zhidao.baidu.com/question/1701946584925153620.html 要想精确验证,最容易想到的方法就是通过月份判断日期是否合法(1~28/29/ ...
- jQuery中效果animate方法解决width是百分比出现的问题
jQuery中效果animate方法解决width是百分比出现的问题 http://www.mafutian.net/131.html 问题描述: 效果如图,初始化,每个层宽20%,采用animate ...
- 网页导出成word文档的默认视图方式问题
网页导出成word文档的默认视图方式问题 一般保存后的word文档默认是“Web版式视图”打开,这样会给客户的感觉不是真正的word文档,必须实现打开就是“页面视图” 1. 修改<html> ...
- Golang源码学习：使用gdb调试探究Golang函数调用栈结构
本文所使用的golang为1.14,gdb为8.1. 一直以来对于函数调用都仅限于函数调用栈这个概念上,但对于其中的详细结构却了解不多.所以用gdb调试一个简单的例子,一探究竟. 函数调用栈的结构(以 ...
- bzoj1497最大闭权图基础题
1497: [NOI2006]最大获利 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 5485 Solved: 2661[Submit][Status] ...
- 快速上手Alibaba Arthas
点击返回上层目录 原创声明:作者:Arnold.zhao 博客园地址:https://www.cnblogs.com/zh94 Arthas 本文主要聚焦于快速上手并使用Arthas,所以对于基本的概 ...
- redis 启动停止重启
启动服务: service redis start 停止服务: service redis stop 重启服务: service redis restart
- 二，表格<table>的使用细节
如有不足请不吝赐教!最先接触的布局表格,表格灵活性,加载速度都不如<div>灵活,但是对于萌新来说再定位某些,例如div里面套文字,而刚接触html+css又不懂得那么多使用<spa ...
- 使用records库操作SQL并且查询MySQL数据库
获取数据库 db = records.Database('mysql://root:xxxx@47.106.151.165/web_table?charset=utf8')注释:xxxx为数据密码 执 ...