当前位置：网站首页>How does native JS generate Jiugong lattice

How does native JS generate Jiugong lattice

2022-06-30 02:46:00 【Yisu cloud】

Native JS How to generate Jiugong lattice

This article introduces “ Native JS How to generate Jiugong lattice ” Knowledge about , During the operation of the actual case , Many people will encounter such difficulties , Next, let Xiaobian lead you to learn how to deal with these situations ！ I hope you will read carefully , Be able to learn ！

Their thinking

Knowledge points involved , please

1、 Make good use of js To make a html style
2、 Yes onmousedown,onmousemove,onmouseup And other events
3、 Master the event object domobj.offsetLeft,domobj.offsetTop,domobj.offsetWidth,domobj.offsetHeight Knowledge points of
4、 Understanding events e.clientX,e.clientY,e.offsetX,e.offsetY,e.pageX,e.pageY Knowledge points of
5、 Understand the principle of cloning nodes 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        body {            margin: 0;            padding: 0;        }        #wrap {            position: relative;        }        #wrap div {            width: 100px;            height: 100px;            position: absolute;            text-align: center;            line-height: 100px;            font-size: 50px;        }    </style></head><body>    <div id="wrap">    </div>    <script>         // 1. obtain warp        var wrap = document.querySelector('#wrap')                   //2. establish 3 That's ok 3 Column 9 individual div. And give each div Add random colors            // The following is the construction idea , Use double for loop            //(0,0)   (110,0)   (220,0)           //(0,110)(110,110)(220,110)           //(0,220)(110,220)(220,220)         var count = 0        var chart = [1, 2, 3, 4, 5, 6, 7, 8, 9]        for (var i = 0; i < 3; i++) {// That's ok             for (var j = 0; j < 3; j++) {// Column                 var odiv = document.createElement('div');                wrap.appendChild(odiv);                // Set up top and left value , Note that the line corresponds to odiv.offsetHeight, The column corresponds to odiv.offsetWidth                odiv.style.top = i * (odiv.offsetHeight + 10) + 'px';                odiv.style.left = j * (odiv.offsetWidth + 10) + 'px';                // Get random colors , With rgb Random acquisition method                 odiv.style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256)                 + ','+ Math.floor(Math.random() * 256) + ')';                // Number each picture ,i,j The maximum value is 3, But a total of 9 Time , Set a variable count=0,count++ As the index of the array, add the corresponding contents to div On                 odiv.innerText = chart[count++];            }        }            //3. Get the... Created in the loop 9 individual div, And add a mouse click event         var items = wrap.children        for (var i = 0; i < items.length; i++) {            items[i].onmousedown = function (e) {                var evt = e || event;                // Get the offset of the mouse point relative to the event source                 var x = evt.offsetX;                var y = evt.offsetY;                //this Point to the mouse and click the object to be dragged                 var dragitem = this;                // Clone click and drag objects . Note that the explanation may be a bit abstract at this time , But the key to solving the problem , Cloning an object is equivalent to other than the above 9 Events ,                // A hidden and clickable div The same object , Replace the cloned object with the object to be dragged when it is just clicked , Drag now                 // Drag object is hidden , Detach parent element , At this point, you need to add the dragged object to the end of the parent element , Reset it to 10 Sub elements , Otherwise, the dragged element cannot be displayed .                var clonenode = dragitem.cloneNode();                wrap.replaceChild(clonenode, dragitem);                // Put the dragged node in wrap Last                 wrap.appendChild(dragitem);                // When dragging, raise the dragging level , Otherwise it will be overwritten .                dragitem.style.zIndex = 1;                //4, At this point, the preparations for mouse clicking have been completed , Because when you drag the mouse , Moving on a document while dragging an object , At this time, the object the mouse moves should be document                document.onmousemove = function (e) {                    var evt = e || event;                    // Get the positioning of the dragged object in the document when following the mouse , The margin of the event source document - The offset from the event source when clicking = Positioning coordinates                     var x1 = evt.clientX - x;                    var y1 = evt.clientY - y;                    dragitem.style.left = x1 + 'px';                    dragitem.style.top = y1 + 'px';                    // Cancel the default behavior                     return false;v                }                //5, There is positioning for dragging objects , At this point, you need to determine which distance is created when the mouse is released div The closest , Swap their distances . above-mentioned , At this point, a total of 10 individual Div,                // Find out the drag object and others respectively 10 individual div To the array , Find the index corresponding to the minimum value , The index corresponds to div It is the nearest div, Then swap the two                 // Location （ Be careful ： Look at the array , The last one is 0, And the drag object has been put at the end , Compare yourself with yourself , Therefore, if you subtract one from the cycle, you can ignore the comparison with yourself ）                document.onmouseup = function () {                    var arr = [];                    // Cycle length -1, Ignore comparisons with yourself                     for (var j = 0; j < items.length - 1; j++) {                    // Using Pythagorean theorem to find distance , And pass in the array                         var disx = dragitem.offsetLeft - items[j].offsetLeft;                        var disy = dragitem.offsetTop - items[j].offsetTop;                        var dissum = Math.sqrt(Math.pow(disx, 2) + Math.pow(disy, 2))                        arr.push(dissum);                    }                    // Use the expansion character ... Expand array , use Math.min Find the minimum , Then use the minimum value to find the corresponding index of the array                     var min = Math.min(...arr);                    var dex = arr.indexOf(min);                    // Change the positioning of the dragged object to the nearest one div Distance of                     dragitem.style.left = items[dex].style.left;                    dragitem.style.top = items[dex].style.top;                    // Then put the nearest div Replace the location of the cloned object with the location of the cloned object at this time （ That is, the positioning of the original drag object ）                    items[dex].style.left = clonenode.style.left;                    items[dex].style.top = clonenode.style.top;                    // At this point, the exchange is completed , Remove the clone node                     wrap.removeChild(clonenode)                    // Remove the event and cancel the default behavior                     document.onmousemove = '';                    document.onmouseup = '';                    return false;                }            }        }    </script></body></html>

“ Native JS How to generate Jiugong lattice ” That's all for , Thanks for reading . If you want to know more about the industry, you can pay attention to Yisu cloud website , Xiaobian will output more high-quality practical articles for you ！

原网站

版权声明
本文为[Yisu cloud]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/181/202206300238317351.html

边栏推荐

猜你喜欢

随机推荐