我需要通过鼠标在 HTML5 页面中选择一个区域。
然后我将与该区域内的元素进行交互。
必须有一个简单的方法来做到这一点，但我找不到现成的任何东西..
不幸的是，jquery UI 选择不起作用，因为它似乎只支持一个父元素。
有没有现成的东西可以在带有虚线轮廓的区域上绘制透明 div？
或者一个简单的实现。我可能会花几个小时来完成一些事情，但我很惊讶没有什么可以让我在 5 分钟内完成。
【问题讨论】：
标签： javascript jquery jquery-ui
看起来很简单……
创建一个最初隐藏的 div：
<div id="div" hidden></div>
样式：
#div {
border: 1px dotted #000;
position: absolute;
}
还有 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
};
【讨论】：
hidden 真的是 <div>s 上的布尔属性吗？
hidden 似乎是一个有用的补充。
我为此目的创建了一个库： https://github.com/Simonwep/selection
目前有完整的桌面和移动/触摸支持以及自动滚动功能，正如您从文件资源管理器中所知道的那样：)
【讨论】：