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 键盘事件的使用方法详解
Sep 13 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery 选择器用法实例分析【prev + next】
May 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
幼儿园元旦活动感言
2014/03/02 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL