<!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. linux常用命令---用户相关操作

    用户相关操作

  2. SpringBoot之整合MongoDB

    MongoDB官网安装:https://www.mongodb.com/download-center/community MongoDB客户端工具(Mongo Management Studio)安 ...

  3. 201771010128 王玉兰《面象对象程序设计（Java）》第六周学习总结

    第一部分:基础知识总结: 1.继承 A:用已有类来构建新类的一种机制,当定义了一个新类继承一个类时,这个新类就继承了这个类的方法和域以适应新的情况: B:特点:具有层次结构.子类继承父类的方法和域: ...

  4. poj2594最小路径覆盖+floyd

    Treasure Exploration Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 8909   Accepted: 3 ...

  5. docker-compose 命令详解

    1.docker-compose的使用非常类似于docker命令的使用,但是需要注意的是大部分的compose命令都需要到docker-compose.yml文件所在的目录下才能执行. 2.[Linu ...

  6. Linux赋权chmod

    chmod -R 777 文件名/ 给文件可读.可修改.可执行权限

  7. [Firefox附加组件]0003.弹出对话框

    Firefox中使用面板(panel)模块来显示弹出对话框,面板的内容通过HTML编写.你可以在面板上运行content script,尽管在面板里的脚本无法直接访问插件代码,但是你可以在面板脚本和插 ...

  8. excel操作数据实用技能

    写代码写习惯了,在做数据预处理时也总是习惯性地用python.pandas来做处理,但其实有时候根本不需要写代码,用excel也能达到目的,甚至比写代码快很多,写代码要半天,excel只要几秒钟.下面 ...

  9. C/C++代码优化之求两个整型的平均值

    在 C/C++ 中, 直接利用 (x + y) >> 1 来计算 \(\left\lfloor {\left( {x + y} \right)/2} \right\rfloor\) (两个 ...

  10. 使用Redis分布式锁实现主备

    使用Redis分布式锁实现集群的主备 最近工作中遇到一个问题,我们会调用业务部门提供的HTTP接口获取所有的音视频任务信息,这些任务会被分发到各个机器节点进行处理.有两个方案: 方案一 为每台机器编号 ...