jquery - 创建 "Lasso tool"来选择元素

Question

我正在尝试在网页上实现这种功能:

1. 通过拖动鼠标选择正方形区域
2. 选取所选区域中的所有元素
3. 处理它们

=> 所以我基本上想创建类似“photoshop 方形选择工具”的东西，它可以获取所选区域中的所有 HTML 元素...这是否可能以某种方式实现？你们中有人这样做过或者知道 js (jQuery) 库吗？

Answer 1

使用碰撞的套索工具选择

无需使用 jQuery 来创建矩形套索工具。

逻辑并不难。

• 鼠标指针被视为“固定位置元素”，因此您还需要一个位置固定的样式化套索元素。
• 启动pointerEvent时始终记住起始clientX、clientY位置
• 在定位套索元素并调整其大小时，请使用以下简单的数学运算:
  x = min(pointerStartX,pointerCurrentX) 和
  w = abs(pointerStartX - pointCurrentX);并对 y 和 h
执行等效操作

套索工具示例:

const el = (sel, par) => (par || document).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);


const toolLasso = {
  onDown({clientX, clientY}) {
    
    this.startX = clientX;
    this.startY = clientY;
    this.el = elNew("div", {className: "lasso"});
    
    this.onMove = this.onMove.bind(this);  
    this.onUp = this.onUp.bind(this);  
    addEventListener("pointermove", this.onMove);
    addEventListener("pointerup", this.onUp);
    
    // Insert into DOM
    Object.assign(this.el.style, {
      position: `fixed`,
      outline: `2px dashed blue`,
      zIndex: `99999`,
      pointerEvents: `none`,
      userSelect: `none`,
    });
    el("body").append(this.el);
  },
  onMove({clientX, clientY}) {
    this.currX = clientX;
    this.currY = clientY;
    const x = Math.min(this.startX, this.currX);
    const y = Math.min(this.startY, this.currY);
    const w = Math.abs(this.startX - this.currX);
    const h = Math.abs(this.startY - this.currY);
    Object.assign(this.el.style, {
      left: `${x}px`,
      top: `${y}px`,
      width: `${w}px`,
      height: `${h}px`,
    });
    
    // Check elements selection:
    // checkElementsCollision(x, y, w, h);
  },
  onUp() {
    removeEventListener("pointermove", this.onMove);
    removeEventListener("pointerup", this.onUp);
    this.el.remove();
  }
};

addEventListener("pointerdown", (evt) => toolLasso.onDown(evt));

* { margin: 0; box-sizing: border-box; }
body { min-height: 200vh; } /* just to force some demo scrollbars */

对于元素的选择 - 任务非常基本:

• onMove 调用 checkElementsCollision(x, y, w, h) ，您主要在其中检查一个元素或一组元素 Element.getBoundingClientRect() x 、 y 、 width 和 height 与套索工具传递的 x、y、w、h 参数值发生冲突.

const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

const collides = (a, b) => 
    a.x < b.x + b.width &&
    a.x + a.width > b.x &&
    a.y < b.y + b.height &&
    a.y + a.height > b.y;

const checkElementsCollision = (x, y, width, height) => {
  els(".box").forEach(elBox => {
    const isColliding = collides({x, y, width, height}, elBox.getBoundingClientRect());
    elBox.classList.toggle("is-selected", isColliding);
  });
};


const toolLasso = {
  onDown({clientX, clientY}) {
    
    this.startX = clientX;
    this.startY = clientY;
    this.el = elNew("div", {className: "lasso"});
    
    this.onMove = this.onMove.bind(this);  
    this.onUp = this.onUp.bind(this);  
    addEventListener("pointermove", this.onMove);
    addEventListener("pointerup", this.onUp);
    
    // Insert into DOM
    Object.assign(this.el.style, {
      position: `fixed`,
      outline: `2px dashed blue`,
      zIndex: `99999`,
      pointerEvents: `none`,
      userSelect: `none`,
    });
    el("body").append(this.el);
  },
  onMove({clientX, clientY}) {
    this.currX = clientX;
    this.currY = clientY;
    const x = Math.min(this.startX, this.currX);
    const y = Math.min(this.startY, this.currY);
    const w = Math.abs(this.startX - this.currX);
    const h = Math.abs(this.startY - this.currY);
    Object.assign(this.el.style, {
      left: `${x}px`,
      top: `${y}px`,
      width: `${w}px`,
      height: `${h}px`,
    });
    
    // Check elements selection:
    checkElementsCollision(x, y, w, h);
  },
  onUp() {
    removeEventListener("pointermove", this.onMove);
    removeEventListener("pointerup", this.onUp);
    this.el.remove();
  }
};

addEventListener("pointerdown", (evt) => toolLasso.onDown(evt));

* { margin: 0; box-sizing: border-box; }
body { min-height: 200vh; } /* just to force some demo scrollbars */

.box {
  position: absolute;
  background: gray;
  width: 40px;
  aspect-ratio: 1;
  left: calc(var(--x) * 1px );
  top: calc(var(--y) * 1px);
}
.box.is-selected {
  background: gold;
}

<div class="box" style="--x:100; --y:100;"></div>
<div class="box" style="--x:150; --y:170;"></div>
<div class="box" style="--x:50; --y:200;"></div>
<div class="box" style="--x:180; --y:10;"></div>

在 MDN 上了解更多信息:2D collision detection