Выберите область / прямоугольник в JavaScript

Question

Мне нужно выбрать регион на странице HTML5 с помощью мыши.

Затем я собираюсь взаимодействовать с элементами в этом регионе.

Должен быть простой способ сделать это, но я ничего не нашел с полки..

К сожалению, выбор пользовательского интерфейса jquery не сработал, поскольку он поддерживает только один родительский элемент.

Есть ли что-нибудь с полки, чтобы нарисовать прозрачную область над областью с пунктирной линией?

Или простая реализация. Я мог бы потратить пару часов и что-нибудь сделать, но я удивлен, что нет ничего, что позволило бы мне сделать это за 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

Более того, есть мобильная поддержка (к сожалению, демо-сайт отсутствует, поэтому попробуйте на настольном компьютере). Я в настоящее время в процессе, но уже пригодный для использования:)