17

I need to select a region in an HTML5 page via the mouse.

I'm then going to interact with the elements within that region.

There MUST be an easy way to do it but I couldn't find anything off the shelf..

The jquery UI selection didn't work unfortunately because it seems to only support one parent element.

Is there anything off the shelf to draw a transparent div over a region with a dashed outline?

Or an easy implementation. I could probably spend a couple of hours and bang something out but I'm surprised there's nothing that allows me to do it in 5 minutes.

ReNiSh AR
  • 2,782
  • 2
  • 30
  • 42
burtonator
  • 451
  • 1
  • 5
  • 11

2 Answers2

47

Seems simple enough…

Create a div that's initially hidden:

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

Style it:

#div {
    border: 1px dotted #000;
    position: absolute;
}

And the 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/

Ry-
  • 218,210
  • 55
  • 464
  • 476
bjb568
  • 11,089
  • 11
  • 50
  • 71
  • 1
    Is `hidden` really a boolean attribute on `
    `s?
     – Ry- May 31 '14 at 01:22
  • 1
    @false [Yup.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#hidden) The fiddle works, doesn't it? – bjb568 May 31 '14 at 01:24
  • 1
    I wouldn’t know; jsFiddle hasn’t worked for me for a while. Anyways, cool! `hidden` seems like a useful addition. – Ry- May 31 '14 at 01:27
  • 4
    @minitech HTML5 defines that attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#hidden – John Dvorak Jul 19 '14 at 15:10
  • 3
    I know this topic is kinda old but I found it while looking for the same thing, do you have any idea how I can detect input elements that are under the selected area ? – Mouradif Oct 20 '16 at 10:51
  • 1
    @KiJéy You can loop thru the inputs and use [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) with some math to find the elements in the selected rect. – bjb568 Oct 20 '16 at 19:43
  • 1
    @bjb568 it has to be pageX and pageY otherwise after scrolling it wont work – Praveena Nov 29 '17 at 18:49
  • 1
    Not exactly what I was looking for but, this gives me a way to do what I wanted. Thank you so much for posting this code snippet. – penguinjeff Jan 08 '18 at 16:12
  • 1
    This is good and I know its old post but anyway to restrict selection in certain area? For ex. I don't want user to be able to select outside an
    – Tejas Gosai Apr 25 '19 at 13:55
  • Here's the revised code from this example with a container and start, stop, select, and remove events. https://github.com/tjmoses/selection-drag/blob/master/src/selection.ts – Tim Sep 02 '21 at 02:48
17

I've created a library for exactly this purpose: https://github.com/Simonwep/selection

There's currently full desktop and mobile / touch support as well as auto-scroll functionality as you know from your file explorer :)

Simon
  • 2,686
  • 2
  • 31
  • 43