在javascript中选择区域/矩形

我需要通过鼠标在HTML5页面中选择一个区域

然后我将与该区域内的元素进行交互

一定有个简单的方法，但我在货架上找不到任何东西

不幸的是，jQueryUI选择不起作用，因为它似乎只支持一个父元素

是否有现成的工具可以在带有虚线轮廓的区域上绘制透明div

或者是一个简单的实现。我可能会花几个小时来完成一些事情，但我很惊讶没有任何东西可以让我在5分钟内完成。

似乎很简单

创建一个初始隐藏的div：

<div id="div" hidden></div>

而JS：

var div = document.getElementById('div'), x1 = 0, y1 = 0, x2 = 0, y2 = 0;
function reCalc() { //This will restyle the div
    var x3 = Math.min(x1,x2); //Smaller X
    var x4 = Math.max(x1,x2); //Larger X
    var y3 = Math.min(y1,y2); //Smaller Y
    var y4 = Math.max(y1,y2); //Larger Y
    div.style.left = x3 + 'px';
    div.style.top = y3 + 'px';
    div.style.width = x4 - x3 + 'px';
    div.style.height = y4 - y3 + 'px';
}
onmousedown = function(e) {
    div.hidden = 0; //Unhide the div
    x1 = e.clientX; //Set the initial X
    y1 = e.clientY; //Set the initial Y
    reCalc();
};
onmousemove = function(e) {
    x2 = e.clientX; //Update the current position X
    y2 = e.clientY; //Update the current position Y
    reCalc();
};
onmouseup = function(e) {
    div.hidden = 1; //Hide the div
};

---

我创建了一个库，正是为了这个目的：

---

目前有完整的桌面和移动/触摸支持，以及您从文件资源管理器中了解到的自动滚动功能：）

您尝试了什么？Post code是

隐藏的

真的是

s上的一个布尔属性吗？@false小提琴可以工作，不是吗？我不知道；JSFIDLE已经有一段时间没有为我工作了。总之，酷

hidden

似乎是一个有用的补充。@minitech HTML5定义了这个属性：我知道这个主题有点旧，但我在寻找相同的东西时发现了它，你知道我如何检测选定区域下的输入元素吗？这太好了@Simon！非常感谢您哇！这看起来棒极了！很高兴尝试一下：）