Native js realizes the drag and drop of the nine-square grid

Use native JS to write a nine-square grid to achieve the effect of dragging and changing the position of the nine grids. For your reference, the specific content is as follows

Effect Demonstration

Specific ideas analysis and code:

Diagram 1:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <!-- 
  Thoughts:
   1. Style setting: It is best to use positioning for layout in the style, otherwise it will be troublesome to drag and drop the code later.
    (The specific position of the parent container is not set here. If the specific position of the parent container is set, the top and left values need to be calculated according to the situation when moving)
   2. The content in the parent container box is best generated using js code, which is convenient for use and adding styles 2-1: (generate child elements in a loop)
     It is not difficult to find that the positioning layout used by our child elements is: the top value of each row is the same, and the left value of each column is the same. Therefore, to loop to generate child elements, we can use a 3*3 nested loop to write it, so that we can set the style of each row.
    2-2: (Add random colors and text to the labels generated by the loop)
     I use rgb() to implement random colors. Text can be generated using ASCII code or string concatenation. I use ASCII code here.
    PS: Now that our basic style is set, the next step is to set the drag event 3 and add events to each element. Here we need three events: onmousedown - onmousemove - onmouseup
    3-1: (First, press the event onmousedown)
     When we press the corresponding child element, we need to get the distance from the mouse to the border line of the pressed target and clone the element.
     Throw this element into the parent container as a placeholder. (Note that the cloned node is placed last in the HTML structure. If it is not handled, there will be a bug later!!!)
    3-2: (Then handle the moving event onmousemove)
     When pressing the child element block and moving it, we need to set the top and left values of the target to achieve follow-up movement, so we need to get the distance from the mouse to the visible window. The top and left values of the target = the distance from the mouse to the visible window - the distance from the mouse to the edge of the target (there is no border here, if necessary, subtract the border width).
     PS: 
      There is a BUG here! ! ! ! When dragging, there is a default event - selected text. When you release it, the target will continue to move, even if you turn off the onmousemove event. So here we need to prevent the default event.
    3-3: (Finally handle the onmouseup event) This is also the most important step! ! ! !
     Core idea:
       When the mouse is lifted, we need to calculate the distance between the center point of the current moving target and the center point of each sub-element.
       The one that is closest will be swapped with it (note that there is a BUG here, which is the BUG mentioned in 3-1 and needs to be dealt with in advance).
     Specific process:
      3-3-1:
       First we need to loop and calculate the distance between the center point of the drag target and the center point of each child element, as shown in Figure 1. (Drag target distance from the left margin of the visible window - child element distance from the left margin of the visible window) square + (Drag target distance from the top margin of the visible window - child element distance from the top margin of the visible window)
       square. Finally, take the square root to get the distance to the center point (note that the BUG in 3-1 must be fixed, put the moving label at the end of the structure, and then exclude it during the loop, otherwise the closest point will be itself each time).
      3-3-2:
       We loop to get every distance we want, then put these distances into an array, and define another array as a backup to facilitate comparison of specific labels.
       Sort one of the arrays, and then look up the index of the smallest value in the backup array. This index is the corresponding child element.
      3-3-3:
       Then give the left and top values of the nearest child element to the target element, then give the left and top values of the cloned label to the nearest child element, and finally remove the cloned label. There will still be a BUG here! ! ! If you lift the mouse without pressing on the label, an error will be reported. This is because the onmouseup event is executed directly, so you need to remove the onmouseup event-->
  <style>
  *{margin: 0;padding: 0;}
  .father{position: relative;}
  .father div{position: absolute;width: 100px;height: 100px;border-radius: 10px;text-align: center;line-height: 100px;font-size: 30px;cursor: pointer;}
  </style>
</head>
<body>
 <div class="father"></div>
 <script>
  // 3*3 loops to generate child div elements and set positioning values for them // Set fixed margin values var mT = 15;
  var mL = 15;
  var asc = 65; //ASCII code value var oFather = document.querySelector('.father');
  for(var i = 0; i < 3; i++){
   for(var j = 0; j < 3; j++){
    var oDiv = document.createElement('div'); //Create child element oFather.appendChild(oDiv);
    oDiv.style.left = j * (oDiv.offsetWidth + mL) +'px';
    oDiv.style.top = i * (oDiv.offsetHeight + mT) +'px';
    // Random color setting oDiv.style.background = 'rgb('+parseInt(Math.random()*256) + "," +parseInt(Math.random()*256) + ","+parseInt(Math.random()*256)+')';
    // Add letters oDiv.innerText = String.fromCharCode(asc++);
   }
  }
  // For ease of understanding, the event is written outside, where you can generate the tag loop inside/* var oItem = document.querySelectorAll('.father>div');
  This method obtains a static collection and only obtains the content of the first page load. Using this method to obtain child elements will cause bugs */
  var oItem = oFather.children;
  for(var k = 0; k<oItem.length; k++){
   oItem[k].onmousedown = function(e){
    var evt = e || event;
    // Get the distance from the mouse to the target border var x = e.offsetX;
    var y = e.offsetY;
    var tagNode = this;
    // Clone target tag var cloneNode = tagNode.cloneNode();
    cloneNode.style.border = '1px dashed #fff';
    oFather.appendChild(cloneNode);
    tagNode.style.zIndex = 1;
    // As mentioned in the idea, there is a BUG here that requires the cloned and dragged nodes to be swapped oFather.replaceChild(cloneNode, tagNode);
    oFather.appendChild(tagNode);
    document.onmousemove = function(e){
     var evt = e || event ; 
     var l = evt.clientX - x;
     var t = evt.clientY - y;
     tagNode.style.left = l + 'px';
     tagNode.style.top = t + 'px';
     // Prevent default events to prevent bugs
     return false;
    }
    document.onmouseup = function(){
     // After lifting the mouse, determine which one is closest and then swap var oldArr = [];
     var newArr = [];
     for(var l = 0; l<oItem.length - 1; l++){
      var disX = tagNode.offsetLeft - oItem[l].offsetLeft;
      var disY = tagNode.offsetTop - oItem[l].offsetTop;
      // Pythagorean theorem var dis = Math.sqrt( Math.pow(disX,2) + Math.pow(disY,2) );
      oldArr.push(dis);
      newArr.push(dis);
     }
     // Sort oldArr from small to large oldArr.sort(function(a,b){return ab});
     var minIndex = newArr.indexOf(oldArr[0]);

     console.log('oldArr' , oldArr, 'newArr' ,newArr);

     // Position the nearest element to the moving target tagNode.style.top = oItem[minIndex].style.top;
     tagNode.style.left = oItem[minIndex].style.left;
     // Position the clone to the nearest oItem[minIndex].style.top = cloneNode.style.top;
     oItem[minIndex].style.left = cloneNode.style.left;

     //Remove the cloned node oFather.removeChild(cloneNode);

     document.onmousemove = null;
     document.onmouseup = null;
    }
    return false;
   }
  }
 </script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: