Question

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

然后我将与该地区内的元素进行互动。

必须有一个简单的方法，但我无法找到任何现成的东西..

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

是否有任何现成的东西在带有虚线轮廓的区域上绘制透明div？

或者简单的实施。我可能花了几个小时才能敲出一些东西，但我很惊讶，没有什么可以让我在5分钟内完成它。

Answer 1

看起来很简单......

创建一个最初隐藏的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
};

http://jsfiddle.net/jLqHv/

Answer 2

我为这个主题创建了一个库： https://github.com/Simonwep/selection

目前，您可以从文件资源管理器中获得完整的桌面和移动/触摸支持以及自动滚动功能。

在javascript中选择区域/矩形

2 个答案: