<!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. Scrapy 框架 入门教程

    Scrapy入门教程 在本篇教程中,我已经安装好Scrapy 本篇教程中将带您完成下列任务: 创建一个Scrapy项目 定义提取的Item 编写爬取网站的 spider 并提取 Item 编写 Ite ...

  2. __call__ 与__init__,object 参数的使用

    class test1: ###有object是可读可写 def __init__(self): ##__init__表示构造函数.__call__是析构函数. self.__pravite = &q ...

  3. 从零开始实现ASP.NET Core MVC的插件式开发(七) - 近期问题汇总及部分解决方案

    标题:从零开始实现ASP.NET Core MVC的插件式开发(七) - 问题汇总及部分解决方案 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/12 ...

  4. SSL F5

    应用交付领域经常提到SSL加速,但SSL加速到底是什么意思?SSL加速和F5指什么意思呢?在网上查询和整理了一些关于SSL加速和F5的相关解释,仅供参考:SSL加速:加密套接层协议(简称SSL)是网络 ...

  5. Python之字符串中是否包含子串的几种方法

    #第一种方式 :in a='abcdaac' b='a' c='db' print(b in a) print(c in a)  预览结果 #第二种方式:count()方法 a='abcdefgab' ...

  6. [编辑排版]小技巧---markdown 转 richText

    Markdown 使用markdown,可以方便地编辑富文本,VSCode自带了对markdown的支持,编辑完成后可点击右上角预览,实时查看效果. 在github上有给账号,就可以使用GithubP ...

  7. Java IO（十三）PipedReader 和 PipedWriter

    Java IO(十三)PipedReader 和 PipedWriter 一.介绍 PipedReader 和 PipedWriter 分别是管道字符输入流和管道字符输出流,它们同 PipedInpu ...

  8. Java IO（二）File

    Java IO(二)File 一.概述 在 Java 中,File 类是 java.io 包中唯一代表磁盘文件本身的对象,也就是说,如果希望在程序中操作文件和目录,则都可以通过 File 类来完成.F ...

  9. Weblogic 漏洞利用总结

    整理的一些利用方式,后续会更新到15年至今的洞 后台爆破拿shell 后台爆破: 部署-安装-上载文件 制作war包,一直下一步,最好保存 jar -cvf shell.war ./shll/* 上传 ...

  10. 分布式事务专题笔记（一） 基础概念 与 CAP 理论

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.基础概念 1.什么是事务 什么是事务?举个生活中的例子:你去小卖铺买东西,“一手交钱,一手交货”就是 ...