<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实现框选效果的更多相关文章

  1. unity实现框选效果

    思路: 在uinity中既可以将屏幕坐标转换为世界坐标,也可以将世界坐标转换为屏幕坐标.这样的话我们就可以通过判断物体在世界坐标转换为平幕坐标是否在鼠标框选的矩形区域坐标内,来判断物体是否在框选范围. ...

  2. vue封装一个简单的div框选时间的组件

    记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...

  3. Javascript实现鼠标框选元素后拖拽被框选的元素

    之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载

  4. javascript 操作复选框无效

    <script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...

  5. javascript练习----复选框全选，全不选，反选

    第一种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. jQuery实现全选效果【转】

    这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...

  7. 原生js实现在表格用鼠标框选并有反选功能

    今天应同学要求,需要写一个像Excel那样框选高亮,并且实现框选区域实现反选功能.要我用原生js写,由于没什么经验翻阅了很多资料,第一次写文章希望各位指出不足!! 上来先建表 <div clas ...

  8. Javascript实现全选按钮

    Javascript实现全选按钮 效果:有全选选项框和单个选项框,选择全选框,所有的的选择都打上的钩,取消全选钩所有的都去掉了钩,如果取消其中某一个的钩,那么全选的钩也取消,反之全选所有的选项,那么全 ...

  9. avalon全选效果分析讲解

    全选功能就是 1.点击全选控制循环元素是否选中.(点击全选,下面的所有元素选中,再次点击 所有元素取消选中.) 2.点击循环元素控制全选.(如果当前元素是未选中状态则全选不选中,如果当前元素是选中状态 ...

随机推荐

  1. （转）从一道面试题彻底搞懂hashCode与equals的作用与区别及应当注意的细节

    背景:学习java的基础知识,每次回顾,总会有不同的认识.该文系转载 最近去面试了几家公司,被问到hashCode的作用,虽然回答出来了,但是自己还是对hashCode和equals的作用一知半解的, ...

  2. http 请求头和响应头

    客户端发送请求过程带着的数据: 1.请求地址 2.请求方式 3.请求头 request headers 4.请求参数 https://www.juhe.cn/ 130.... 1a2b....pei ...

  3. TestNg-数据驱动-dataProvider

    参考https://blog.csdn.net/hjianhui24/article/details/50554828 之前的用例自己一笔一划写出来的,知道了数据驱动的概念之后,修改了一下用例. @D ...

  4. secureCRT恶意终止下次无法启动

    secureCRT使用中恶意中断后会在C:\Documents and Settings\wuyipeng\Application Data目录下产生一个secureCRT.dmp文件 下次正常运行s ...

  5. 干货分享：互联网运营 学习SEO从零开始 SEO深度解析学习笔记

    最近在自学SEO,互联网运营,把做的笔记干货分享给大家啊! 希望能帮到大家,如有好的建议可以关注我[磨人的小妖精]或留言,大家一起探讨. 之前还写过一篇文章互联网运营+SEO:推荐必看的5本书籍,学习 ...

  6. 推荐几个Mac插件帮你提升工作效率

    下面这篇文章是小编看到的很好的文章,分享给大家,小编前几天也整理了很多mac专题文章.更多专题,可关注[磨人的小妖精],查看我的文章,也可上[风云社区 SCOEE],查找和下载相关软件资源. (一)综 ...

  7. bzoj4034 线段树+dfs序

    https://www.lydsy.com/JudgeOnline/problem.php?id=4034 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 ...

  8. 新硬盘挂载-fdisk+mount案例实操

    新硬盘挂载-fdisk+mount案例实操 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 现在很多服务器都支持热插拔了,当有新的硬盘插入到服务器上我们需要将其分区,格式化,然后挂载 ...

  9. cookies、sessionStorage和localStorage解释及区别

    在浏览器查看 HTML4的本地存储 cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和sessio ...

  10. [NIO-2]通道和FileChannel

    通道是什么 通道式(Channel)是java.nio的第二个主要创新.通道既不是一个扩展也不是一项增强,而是全新的.极好的Java I/O示例,提供与I/O服务的直接连接.Channel用于在字节缓 ...