JavaScript实现框选效果

<html>

  <head>

    <title>region</title>

    <style>

      body {

        margin: 0;

        padding: 0;

      }

      #selectContainer {

        position: relative;

        width: 400px; /* 演示宽高与位置 */

        height: 400px;

        top: 200px;

        left: 200px;

        border: 1px solid #eee;

        overflow: hidden;

        overflow-x: auto;

      }

      .fileDiv {

        display: inline-block;

        width: 100px;

        height: 100px;

        margin: 24px;

        background-color: #0082CC;

        float: left;

      }

      .wrapper {

        width: 1080px;

      }

    </style>

  </head>

  <body>

    <div id="selectContainer">

      <div class="wrapper">

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

      <div class="fileDiv"></div>

    </div>

    </div>

  </body>

</html>

<script>

  (function () {

    var mouseStopId;

    var mouseOn = false;

    var startX = 0;

    var startY = 0;

    // 获取容器元素

    var selectContainer = document.getElementById('selectContainer');

    selectContainer.onmousedown = function (e) {

      clearEventBubble(e);

      if (e.buttons !== 1 || e.which !== 1) return;

      mouseStopId = setTimeout(function () {

        mouseOn = true;

        // 调整坐标原点为容器左上角

        startX = e.clientX - selectContainer.offsetLeft + selectContainer.scrollLeft;

        startY = e.clientY - selectContainer.offsetTop + selectContainer.scrollTop;

        var selDiv = document.createElement('div');

        selDiv.style.cssText = 'position:absolute;width:0;height:0;margin:0;padding:0;border:1px dashed #eee;background-color:#aaa;z-index:1000;opacity:0.6;display:none;';

        selDiv.id = 'selectDiv';

        // 添加框选元素到容器内

        document.getElementById('selectContainer').appendChild(selDiv);

        selDiv.style.left = startX + 'px';

        selDiv.style.top = startY + 'px';

      }, 20);

      document.onmousemove = function (e) {

        if (!mouseOn) return;

        clearEventBubble(e);

        var selectContainer = document.getElementById('selectContainer');

        var _x = e.clientX - selectContainer.offsetLeft + selectContainer.scrollLeft;

        var _y = e.clientY - selectContainer.offsetTop + selectContainer.scrollTop;

        var _H = selectContainer.offsetWidth

        // 鼠标移动超出容器内部，进行相应的处理

        // 向右拖拽

        if (e.clientX > selectContainer.offsetLeft + selectContainer.offsetWidth) {

          let maxLeft = selectContainer.scrollWidth - selectContainer.offsetWidth

          let step = selectContainer.scrollLeft + 20

          if (step >= maxLeft) {

            selectContainer.scrollLeft = maxLeft

          } else {

            selectContainer.scrollLeft = step

          }

        }

        // 向左拖拽

        if (e.clientX < selectContainer.offsetLeft) {

          let minLeft = 0

          let step = selectContainer.scrollLeft - 20

          if (step <= minLeft) {

            selectContainer.scrollLeft = minLeft

          } else {

            selectContainer.scrollLeft = step

          }

        }

        var selDiv = document.getElementById('selectDiv');

        selDiv.style.display = 'block';

        selDiv.style.left = Math.min(_x, startX) + 'px';

        selDiv.style.top = Math.min(_y, startY) + 'px';

        if ((Math.min(_x, startX) + Math.abs(_x - startX)) <= selectContainer.scrollWidth) {

          selDiv.style.width = Math.abs(_x - startX) + 'px';

        }

        selDiv.style.height = Math.abs(_y - startY) + 'px';

      };

      document.onmouseup = function (e) {

        if (!mouseOn) return;

        clearEventBubble(e);

        var selDiv = document.getElementById('selectDiv');

        var fileDivs = document.getElementsByClassName('fileDiv');

        var selectedEls = [];

        var l = selDiv.offsetLeft;

        var t = selDiv.offsetTop;

        var w = selDiv.offsetWidth;

        var h = selDiv.offsetHeight;

        for (var i = 0; i < fileDivs.length; i++) {

          var sl = fileDivs[i].offsetWidth + fileDivs[i].offsetLeft;

          var st = fileDivs[i].offsetHeight + fileDivs[i].offsetTop;

          if (sl > l && st > t && fileDivs[i].offsetLeft < l + w && fileDivs[i].offsetTop < t + h) {

            fileDivs[i].style.background = 'red'

            selectedEls.push(fileDivs[i]);

          }

        }

        console.log(selectedEls);

        selDiv.style.display = 'none';

        mouseOn = false;

      };

    }

    function clearEventBubble (e) {

      if (e.stopPropagation) e.stopPropagation();

      else e.cancelBubble = true;

      if (e.preventDefault) e.preventDefault();

      else e.returnValue = false;

    }

  })();

</script>

JavaScript实现框选效果的更多相关文章

unity实现框选效果
思路: 在uinity中既可以将屏幕坐标转换为世界坐标,也可以将世界坐标转换为屏幕坐标.这样的话我们就可以通过判断物体在世界坐标转换为平幕坐标是否在鼠标框选的矩形区域坐标内,来判断物体是否在框选范围. ...
vue封装一个简单的div框选时间的组件
记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...
Javascript实现鼠标框选元素后拖拽被框选的元素
之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果框选后的内容可以拖拽,如下图: 代码下载
javascript 操作复选框无效
<script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...
javascript练习----复选框全选，全不选，反选
第一种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
jQuery实现全选效果【转】
这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...
原生js实现在表格用鼠标框选并有反选功能
今天应同学要求,需要写一个像Excel那样框选高亮,并且实现框选区域实现反选功能.要我用原生js写,由于没什么经验翻阅了很多资料,第一次写文章希望各位指出不足!! 上来先建表 <div clas ...
Javascript实现全选按钮
Javascript实现全选按钮效果:有全选选项框和单个选项框,选择全选框,所有的的选择都打上的钩,取消全选钩所有的都去掉了钩,如果取消其中某一个的钩,那么全选的钩也取消,反之全选所有的选项,那么全 ...
avalon全选效果分析讲解
全选功能就是 1.点击全选控制循环元素是否选中.(点击全选,下面的所有元素选中,再次点击所有元素取消选中.) 2.点击循环元素控制全选.(如果当前元素是未选中状态则全选不选中,如果当前元素是选中状态 ...

随机推荐

A1066. Root of AVL Tree
An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...
（转）每天一个linux命令（44）：top命令
背景:在面试时候面试官问到关于linux服务器下内存优化的问题.自己之前可能接触过也没有深入总结过. top命令每天一个linux命令(44):top命令
Linux下学习摄像头使用
刚接触Linux硬件驱动有关的项目,配置摄像头经历的一些操作 (这篇文章是刚接触Linux下V4L时作为记录记下的,感觉只有几个命令还有参考作用) 一确定摄像头种类确定是否符合UVC标准协议,一般 ...
c#大文件的拷贝
using System.IO; namespace 数据流 { class Demo2 { private string _strSourcePath = @"D:\httpd-2.4.3 ...
一键开启MacOS HiDPI
完整文件下载:一键开启MacOS HiDPI 引言作为一个黑苹果用户,追求黑果的体验是当然的,当各个硬件都驱动完善后,要做的就是细节的优化了,毕竟装上是拿来用的,可不能因为体验差苦了自己啊.机器毕竟 ...
mysql5.6.40单实例安装二进制快捷安装
mysql5.6.40单实例安装二进制快捷安装近期因不同环境需要不同版本的mysql实例,故为了方便操作,特此记录下来,方便自己查找. # 1.1.Centos最小化安装推荐常用依赖包 yum cl ...
20165232第4次实验《Android程序设计》实验报告
20165232第4次实验<Android程序设计>实验报告一.实验报告封面一.实验报告封面课程:Java程序设计班级:1652班姓名:何彦达学号:20165232 指导教师: ...
MySQL 8.0.14 新的密码认证方式和客户端链接
MySQL 8.0.14 新的密码认证方式和客户端链接作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. MySQL8.0在密码认证方式发生了改变,这也是有点小伙伴在MySQL创建 ...
java io系列23之 BufferedReader(字符缓冲输入流)
转载请注明出处:http://www.cnblogs.com/skywang12345/p/io_23.html 更多内容请参考:java io系列01之 "目录" Buffere ...
HDFS 读写数据流程
一.上传数据二.下载数据三.读写时的节点位置选择 1.网络节点距离(机架感知) 下图中: client 到 DN1 的距离为 4 client 到 NN 的距离为 3 DN1 到 DN2 的距离为 ...

JavaScript实现框选效果

JavaScript实现框选效果的更多相关文章

随机推荐

热门专题