前端js、javascript 鼠标框选文件功能

玫瑰花开一片一片

已于 2023-02-14 11:27:00 修改

阅读量694

点赞数 1

分类专栏： HTML JAVASCRIPT 文章标签： javascript 前端开发语言

于 2023-02-10 16:25:22 首次发布

本文链接：https://blog.csdn.net/q515656712/article/details/128971034

版权

JAVASCRIPT 同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

HTML

17 篇文章 0 订阅

订阅专栏

一、DEMO

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>selection</title>
  <style>
    * {
      padding: 0px;
      margin: 0px;
      list-style: none;
    }
    html,body { height: 100%; width: 100%; overflow: hidden; }
    #root {
      height: 100%;
      background: #000;
      overflow-y: auto;
      overflow-x: hidden;
    }
    ul li {
      margin: 10px;
      border: #ccc solid 1px;
      display: inline-block;
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      color: #fff;
    }
    /* 框选盒子样式 */
    .tempDiv {
      border:1px dashed #fff;
      background:#fff;
      position:absolute;
      width:0;
      height:0;
      opacity:0.5;
      pointer-events: none;
    }
  </style>
  <script  src="selection.js"></script>
</head>
<body>
  <div id="root">
    <ul class="oul">
    </ul>
  </div>
  <script>
    // 创建 元素
    const oul = document.querySelector('.oul')
    const map = new Map()
    Array(50).fill().forEach((item, index) => {
      const oli = document.createElement('li')
      const key = index + 1
      oli.setAttribute('data-id', key)
      oli.classList.add('target-node')
      oli.innerText = key
      map.set(key + '', oli)
      oul.appendChild(oli)
    })
    // 调用函数
    selection({
      root: document.querySelector('#root'), // 盒子
      target: '.target-node', // 框选元素类名
      dataId: 'data-id', // 框选元素 data-xxx
      callBack: (ids) => { // 框选元素回调 优先 dataId || Element
        ids.forEach(id => {
          const oli = map.get(id)
          oli.style.borderColor = 'red'
        })
      }
    })
  </script>
</body>
</html>

二、selection.js

// 默认配置
const defaults = {
  root: document,
  target: '.target-node',
  dataId: 'data-id'
}

// 事件阻止
function clearEventBubble(evt) { 
  if (evt.stopPropagation) 
    evt.stopPropagation(); 
  else 
    evt.cancelBubble = true; 
  if (evt.preventDefault) 
    evt.preventDefault(); 
  else 
    evt.returnValue = false; 
}

// ---------------- 关键算法 ---------------------
function computed (pos, option) {
  const Rect = option.root.getBoundingClientRect()
  const targetList = Array.from(document.querySelectorAll(option.target))
  const {x,y,w,h} = pos
  let ids = []
  const scrollTop = option.root.scrollTop
  const scrollLeft = option.root.scrollLeft
  targetList.forEach(node => {
    const nodeRect = node.getBoundingClientRect()
    let sleft = nodeRect.left + scrollLeft - Rect.left + node.offsetWidth
    let sTop = nodeRect.top + scrollTop - Rect.top + node.offsetHeight
    let offsetLeft = nodeRect.left - Rect.left + scrollLeft
    let offsetTop = nodeRect.top - Rect.top + scrollTop
    if (sleft > x && sTop > y && offsetLeft < x + w && offsetTop < y + h) {
      ids.push(node.getAttribute(option.dataId) || node)
      return true
    } else {
      return false
    }
  })
  option.callBack && option.callBack(ids)
}
const selection = function (option = {}) {
  for (let key in defaults) {
    if (!option.hasOwnProperty(key)) {
      option[key] = defaults[key]
    }
  }
  const Root = option.root
  Root.onmousedown = function (e) {
    if (e.button !== 0) return false
    const Rect = Root.getBoundingClientRect()
    var posx = e.clientX - Rect.left + Root.scrollLeft
    var posy = e.clientY - Rect.top + Root.scrollTop
    var div = document.createElement('div')
    div.className = 'tempDiv'
    div.style.left = posx + 'px'
    div.style.top = posy + 'px'
    Root.style.position = 'relative'
    Root.appendChild(div);
    clearEventBubble(e)
    Root.onmousemove = function(ev){
      const clientX = ev.clientX - Rect.left
      const clientY = ev.clientY - Rect.top
      const left = Math.min(clientX + Root.scrollLeft, posx)
      const top = Math.min(posy, clientY + Root.scrollTop)
      const width =  Math.abs(posx - clientX + Root.scrollLeft)
      const height = Math.abs(posy - clientY - Root.scrollTop)
      div.style.left = left+ 'px'
      div.style.top = top + 'px'
      div.style.width = width + 'px'
      div.style.height = height + 'px'
      if (width < 5 && height < 5 ) return false
      computed({
        x: left,
        y: top,
        w: width,
        h: height
      }, option)
      clearEventBubble(ev)
    }
    document.onmouseup = function(){
      Array.from(document.querySelectorAll('.tempDiv')).forEach(node => {
        node.remove()
      })
      Root.style.position = ''
      Root.onmousemove = null
      document.onmouseup = null
    }
  }
}

// export default selection

三、CSS

.tempDiv {
      border:1px dashed #fff;
      background:#fff;
      position:absolute;
      width:0;
      height:0;
      opacity:0.5;
      pointer-events: none;
    }

四、使用

selection({
      root: document.querySelector('#root'), // 盒子
      target: '.target-node', // 框选元素类名
      dataId: 'data-id', // 框选元素 data-xxx
      callBack: (ids) => { // 框选元素回调 优先 dataId || Element
        ids.forEach(id => {
          const oli = map.get(id)
          oli.style.borderColor = 'red'
        })
      }
    })