<!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实现拖拽元素的更多相关文章

  1. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  2. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  3. juqery 拖拽元素

    转自  http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...

  4. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  5. jQuery 鼠标拖拽排序

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  7. 简单的JQuery完美拖拽

    首先导入jq库,最好是1.0版本的.调用函数时,传入要拖拽元素的id值. function drag(sel){ $div = $("#"+sel); $div.mousedown ...

  8. 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  9. H5 拖拽元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 第七篇：wed版语音机器人

    wed版语音机器人: GitHub项目地址:https://github.com/Yang915/WebToy 特别说明:该项目在本机测试,通过浏览器调用系统麦克风(https请求),实际环境在Fir ...

  2. 基于SpringCloud分布式架构

    基于SpringCloud分布式架构 为什么要使用分布式架构 Spring Cloud 专注于提供良好的开箱即用经验的典型用例和可扩展性机制覆盖 分布式/版本化配置 服务注册和发现 路由 Servic ...

  3. vscode环境配置(三)——解决控制台终端中文输出乱码

    由于系统终端默认编码为GBK,所以需要修改为UTF-8 方法一 打开cmd输入chcp查看编码格式,查看以及修改如下图所示: 方法二

  4. Poj2965 冰箱的开关

    #include<iostream> using namespace std; int flag; int step; ][]; ] = { }; ] = { }; void turn(i ...

  5. 【持续更新】springboot相关配置

    @Configuration public class MyWebMvcConfig implements WebMvcConfigurer { //注册了新的访问路径 @Override publi ...

  6. pop() 函数用于移除列表中的一个元素（默认最后一个元素），并且返回该元素的值。

    pop() 函数用于移除列表中的一个元素(默认最后一个元素),并且返回该元素的值.

  7. JSP指令 & 中文乱码问题

    1. JSP 指令: JSP指令(directive)是为JSP引擎而设计的,     它们并不直接产生任何可见输出, 而只是告诉引擎如何处理JSP页面中的其余部分. 2. 在JSP 2.0中,定义了 ...

  8. idea本地Maven仓库不能下载依赖jar包的解决方案

    1.确认maven是否正正常安装,是否配置了环境变量,可以通过命令 mvn -version 看是否显示maven的版本信息. 2.检查maven的setting.xml配置文件中本地仓库位置配置是否 ...

  9. Cypress系列（5）- 自定义 Cypress

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 Cypress 不仅支持用户自定义 ...

  10. jchdl - GSL实例 - Sub（二的补码实现）

    https://mp.weixin.qq.com/s/10fgjqPt2pRvIJzjDGYgBg   概念辨析   <IC-二进制, 自然数, 有符号数>:https://mp.weix ...