<!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. React使用hook

    Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 为什么会有hook 在组件之间复用状态逻辑很难,需要重新组织你 ...

  2. P3254 圆桌问题 网络流

    P3254 圆桌问题 #include <bits/stdc++.h> using namespace std; , inf = 0x3f3f3f; struct Edge { int f ...

  3. 解决使用IDEA启动Tomcat成功但localhost:8080无法访问的问题

    解决使用IDEA启动Tomcat成功但localhost:8080无法访问的问题

  4. Java——反射三种方式的效率对比

    转载自:https://blog.csdn.net/aitcax/article/details/52694423 1 使用field(效率最高)             long start = S ...

  5. 由一次安全扫描引发的思考：如何保障 API 接口的安全性？

    引言 前段时间,公司对运行的系统进行了一次安全扫描,使用的工具是 IBM 公司提供的 AppScan . 这个正所谓不扫不要紧,一扫吓一跳,结果就扫出来这么个问题. 我们的一个年老失修的内部系统,在登 ...

  6. 什么，容器太多操作不过来？我选择Docker Compose梭哈

    接上一篇:面试官:你说你精通 Docker,那你来详细说说 Dockerfile 吧 一.容器之间通信 1.单向通信 1.1.什么意思 mysql和tomcat是两个独立的容器,但是tomcat需要和 ...

  7. 设计Person类 代码参考

    #include <iostream> using namespace std; class Trapezium { private: int x1,y1,x2,y2,x3,y3,x4,y ...

  8. php mysqli使用

    连接到数据库$mysqli = new mysqli(主机,用户,密码,数据库); 选择数据库$mysqli->select_db(数据库);设置编码$mysqli->set_charse ...

  9. ElementUi 全选功能实现

    每次使用官方的示例都会被坑一下(可能是我的理解不够透彻吧,不记录一下保不准下次依旧会忘), 故此今天做个Demo 记录一下.本次仍然使用官网给出的示例,只做理解性的说明. 1.此处先给出官方示例代码: ...

  10. Liunx下使用wine容器实现跨平台使用软件

    首先在Liunx中使用QQ,网易云音乐,等这些软件是很痛苦的,某些软件可能会有Liunx版本,但是像腾讯QQ早年前也提供过Linux版本,后来就下架了!!! 这里我以ubuntu18.04版本为列,讲 ...