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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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 翻页 实例代码
2009/08/07 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Python内置类型性能分析过程实例
2020/01/29 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Python如何读写字节数据
2020/08/05 Python
浅析python中的del用法
2020/09/02 Python
Python 可视化神器Plotly详解
2020/12/26 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
中医专业应届生求职信
2013/11/17 职场文书
卫生巾广告词
2014/03/18 职场文书
工伤事故证明
2014/10/20 职场文书
2014年民政工作总结
2014/11/26 职场文书
会计工作岗位职责
2015/02/03 职场文书
前台岗位职责范本
2015/04/16 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫