jquery实现拖拽小方块效果


Posted in jQuery onDecember 10, 2020

今天来讲一个很常用的拖拽功能,主要是利用一点css,js和jquery,很简单但同时也很重要,掌握好才是最关键的!

下面来看下效果图:

这里可以看到,在鼠标hover的时候会有一个透明度的变化和一个盒子阴影!并且在右下角会实时的显示出小方块移动时横纵坐标的变化!

jquery实现拖拽小方块效果

可以看到有一个盒子阴影

jquery实现拖拽小方块效果

在鼠标单击按住的时候会变红,然后可以拖动小块随意移动

jquery实现拖拽小方块效果

我们在看代码之前可以先了解下jquery中的基本知识(选择器,css控制器什么的)和offset()clientX,clientY。思路很简单,就是分别监听鼠标的 mousedown,mouseup,mousemove这三个事件,通过判断div移动之前的坐标,div移动之后的坐标(offset获得)和鼠标移动前后的坐标(clientX和clientY获得)判断div在body里的具体坐标位置,然后设置div在body里左边和上边的距离(left,top)。代码思路在代码里很详细!希望大家好好理解!

附上代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖动图片</title>
  <style>
    html {
      height: 100%;
    }
    
    body {
      margin: 0px;
      padding: 0rem;
      border: 0rem;
      height: 100%;
      width: 100%;
      position: relative;
      /* 取消默认的输入事件,不然会一直出现‘I'一样的光标 */
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    #drag {
      height: 200px;
      width: 200px;
      background: teal;
      border: none;
      border-radius: 1rem;
      /* 一定要是absolute */
      position: absolute;
      opacity: 0.8;
    }
    
    #drag:hover {
      box-shadow: 0 8px 12px 0 rgba(16, 49, 231, 0.4);
      opacity: 1;
      cursor: pointer;
    }
    
    input {
      width: 12rem;
      height: 2rem;
      font-size: 1.5rem;
      border: 2px solid #aaa;
    }
    
    #input1 {
      display: block;
      position: absolute;
      bottom: 1.2rem;
      right: 1rem;
    }
    
    #input2 {
      display: block;
      position: absolute;
      bottom: 1.2rem;
      right: 16rem;
    }
  </style>
</head>

<body>

  <div id="drag">

  </div>
  <input type="text" id="input1" name="y" placeholder="y轴的坐标为">
  <input type="text" id="input2" name="x" placeholder="x轴的坐标为">

  <!-- 引入内部jquery,大家使用可以引入CDN -->
  <script src="jquery-3.5.1.min.js"></script>
  <script>
    var client_x = 0;
    var client_y = 0;
    var offset_x = 0;
    var offset_y = 0;
    var moving = false;
    // 利用jquery获得div这个元素
    var drag = $('#drag');
    // 添加监听事件
    drag.on({
      // 鼠标抬起事件
      mouseup: function(e) {
        moving = false;
        // 为div添加一个css样式
        $("#drag").css("background", 'teal');
      },
      // 鼠标按下事件
      mousedown: function(e) {
        moving = true;
        // this代表的是 div
        var offset = $(this).offset();
        // offset() 方法设置或返回被选元素相对于文档的偏移坐标
        offset_x = offset.left;
        offset_y = offset.top;
        // clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面的水平坐标
        client_x = e.clientX;
        // clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面的垂直坐标
        client_y = e.clientY;
        drag.css("background", 'rgb(179, 43, 19)');
      },
      // 鼠标移动事件
      mousemove: function(e) {
        if (moving) {
          // 为div添加一个css样式
          drag.css({
            left: offset_x + (e.clientX - client_x),
            top: offset_y + (e.clientY - client_y)
          });
          // 设置并显示input标签内x,y轴的坐标
          $(':input[name="x"]').val(offset_x + (e.clientX - client_x));
          $(':input[name="y"]').val(offset_y + (e.clientY - client_y));
          drag.css("cursor", "pointer");
        }
      }
    });
  </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery实现简单弹幕制作
Dec 10 #jQuery
JQuery绑定事件四种实现方法解析
Dec 02 #jQuery
jquery实现拖拽添加元素功能
Dec 01 #jQuery
jQuery实现可以扩展的日历
Dec 01 #jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 #jQuery
jQuery实现查看图片功能
Dec 01 #jQuery
基于jQuery拖拽事件的封装
Nov 29 #jQuery
You might like
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
jquery编写日期选择器
2017/03/16 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
微信小程序实现搜索历史功能
2020/03/26 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
python实现学生管理系统
2018/01/11 Python
Python实现k-means算法
2018/02/23 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python浪漫表白源码
2019/04/05 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python Django 创建应用过程图示详解
2019/07/29 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
Python序列类型的打包和解包实例
2019/12/21 Python
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
计算机专业自我鉴定
2013/10/15 职场文书
给校长的建议书600字
2014/05/15 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
python中subplot大小的设置步骤
2021/06/28 Python