End result:

1. Write something scrollable first

2. Select the valid area in the declaration box

What is the soul of an editor? All operations are performed on a blackboard, and we can only draw and manipulate on this blackboard, which is called the editor effective area.

var selectContainer = document.getElementById('container'); // Select the effective area of the boxCopy the code

3, mouse down, into a total method

selectContainer.onmousedown = function () { alert(2222222); // Test the event in the valid area with the mouse down}Copy the code

4. Add a new square div to the container

(Demo keeps changing colors….)

var selection = document.createElement('div'); selectContainer.onmousedown = function (e) { selection.style.cssText="width: 100px; height: 100px; background: lightblue; Opacity: 0.4 "; document.getElementById('container').appendChild(selection); }Copy the code

This light blue square is our future box. But the starting position of the box selection box (x,y), we want to be absolutely positioned relative to the valid region. So, the code is further written as:

#container {
    width: 400px;
    height: 300px;
    overflow-y: auto;
    position: relative;
    border: 1px solid #ddd;
}


selection.style.cssText="width: 100px; height: 100px; background: lightblue; opacity: 0.4; position: absolute";
Copy the code

And we declare two variables: the horizontal coordinate and the vertical coordinate (the point in the upper left corner of the box).

var startX = 0; var startY = 0; selectContainer.onmousedown = function (e) { startX = e.clientX - selectContainer.offsetLeft + selectContainer.scrollLeft; startY = e.clientY - selectContainer.offsetTop + selectContainer.scrollTop; /* Horizontal coordinates of the mouse relative to the viewport - Position of the container offset (fixed) + scrolling offset *** This is a very easy place to write a bug *** When writing a box selection, many people will position the box selection relative to the entire page. When we select a box and let the content of the editing area scroll, the box selection box will not cover the content of the scrolling part, but will appear the box selection box silly fixed in a place, that is, cannot be combined with the content of the editing area. *** End *** */Copy the code

Once we have the mouse click position, we try to position the light blue square to the mouse click position.

selection.style.left = startX;
selection.style.top = startY;
Copy the code

Now that we have the registration point for mouse click, we need to find the registration point for mouse down and the width and height of the box selection.

5. Find the range of squares

First, our square range is determined by how much the mouse moves, so we’ll write a movement event after the mouse is pressed:

SelectContainer. Onmousemove = function (e) {if (e.b uttons = = 1 | | e.w hich = = 1) {/ / add a condition: mouse the left key press alert (" move!" ); }}Copy the code

Then, make the dead square follow the mouse drag position to move. But before we do that, we’re going to restyle the little blue box (width and height 0, hidden by default)

selection.style.cssText="width: 0; height: 0; background: lightblue; Opacity: 0.4; position: absolute; display: none;" ;Copy the code

After the reset, write the code for the dynamic box checkbox as follows:

selection.style.display = "block";
selection.style.width = Math.abs(_x - startX) + "px";
selection.style.height = Math.abs(_y - startY) + "px";
Copy the code

6, mouse down interaction

selectContainer.onmouseup = function (e) {
    selection.style.display = "none";
}
Copy the code

7. Select boxes and alternate nodes

After the box selection, some nodes are selected. We will conduct some batch operations on these nodes in the future. So, have an empty container for these nodes:

/ / get all the first can be the chosen candidate nodes var lines = document. The getElementsByClassName (" line "); // The container of the selected node var selectedEls = [];Copy the code

Further back, calculate how many nodes are selected by the box checkbox.

8. The relationship between boxes and options

selectContainer.onmouseup = function (e) { var a = selection.offsetLeft; var b = selection.offsetWidth; var c = selection.offsetTop; var d = selection.offsetHeight; for (var i = 0; i < lines.length; i++) { var sr = lines[i].offsetWidth + lines[i].offsetLeft; Var sb = lines[I].offsetheight + lines[I].offsetTop; // Option bottom side // option right side SL > box selection horizontal offset A // Option bottom ST > box selection vertical offset C // option from left distance lines[I]. OffsetLeft < box selection horizontal offset a + box selection width b If (sr > a && sb > c && lines[I].offsetLeft < a + b && lines[i].offsetTop < c + d) { lines[i].style.background = "#0082cc"; selectedEls.push(lines[i]); } else { ...... } } selection.style.display = "none"; }Copy the code