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 ...
随机推荐
- Java Thread中，run方法和start方法的区别
两种方法的区别: 1.start方法 用 start方法来启动线程,是真正实现了多线程, 通过调用Thread类的start()方法来启动一个线程,这时此线程处于就绪(可运行)状态,并没有运行,一旦 ...
- 【PHP+MySQL学习笔记】php操作MySQL数据库中语句
1.连接 MYSQL 服务器的函数 mysql_connect();<?php $con = mysql_connect("localhost","root&quo ...
- BZOJ1077 并查集
1077: [SCOI2008]天平 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 416 Solved: 224[Submit][Status][ ...
- 使用cxfreeze打包成exe文件
旧版本下载链接地址python3.4以下的:https://www.lfd.uci.edu/~gohlke/pythonlibs/#cx_freeze 最新版本python3.5以上直接使用 pip ...
- leetcode198之打家劫舍问题
问题描述: 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警. 给 ...
- 01 . Tomcat简介及部署
Tomcat简介 Tomcat背景 tomcat就是常用的的中间件之一,tomcat本身是一个容器,专门用来运行java程序,java语言开发的网页.jsp就应该运行于tomcat中.而tomcat本 ...
- 深入了解ConcurrentHashMap
在上一篇文章[简单了解系列]从基础的使用来深挖HashMap里,我从最基础的使用中介绍了HashMap,大致是JDK1.7和1.8中底层实现的变化,和介绍了为什么在多线程下可能会造成死循环,扩容机智是 ...
- 【Flutter组件终结篇】332个组件 658页PDF
老孟导读:历时1年的时间,整理完成了330+组件的详细用法,不仅包含UI组件,还包含了功能性的组件. 虽然整理了 330+的组件基本用法,但并不是让你每一个都学习一遍,任何技术基本都是掌握 20%就可 ...
- Java实现 LeetCode 827 最大人工岛（DFS+暴力模拟）
827. 最大人工岛 在二维地图上, 0代表海洋, 1代表陆地,我们最多只能将一格 0 海洋变成 1变成陆地. 进行填海之后,地图上最大的岛屿面积是多少?(上.下.左.右四个方向相连的 1 可形成岛屿 ...
- Java实现 LeetCode 657 机器人能否返回原点（暴力大法）
657. 机器人能否返回原点 在二维平面上,有一个机器人从原点 (0, 0) 开始.给出它的移动顺序,判断这个机器人在完成移动后是否在 (0, 0) 处结束. 移动顺序由字符串表示.字符 move[i ...