九宫格拖拽与互换

Posted 2020-11-12 ch-cnblogs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了九宫格拖拽与互换相关的知识，希望对你有一定的参考价值。

技术图片

以上是一个九宫格，要想实现元素的拖拽和互换，如点击A到E的位置是，A会拖拽到E的位置，E会自动返回到A的位置；代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>九宫格拖拽与交换</title>
</head>
<style type="text/css">
    #content{width: 300px;height:300px;margin: 0 auto;position: relative;}
    #content div{width: 100px;height: 100px; float: left;line-height: 100px;text-align: center;font-size:40px; font-weight: 900; color: black; cursor: pointer; position: absolute;}
    #content div:nth-child(1){background-color: #f05b72; top:0; left: 0;border: 1px solid;border-radius: 20px; }
    #content div:nth-child(2){ background-color: #faa755; top:0; left:100px;border: 1px solid;border-radius: 20px;}
    #content div:nth-child(3){background-color: #2585a6; top:0; left: 200px;border: 1px solid;border-radius: 20px;}
    #content div:nth-child(4){background:#5ce4fd; top:100px;left: 0;border: 1px solid;border-radius: 20px; }
    #content div:nth-child(5){ background:#f61acf; top:100px;left: 100px;border: 1px solid;border-radius: 20px; }
    #content div:nth-child(6){ background:#3ef9bd; top:100px; left: 200px;border: 1px solid;border-radius: 20px; }
    #content div:nth-child(7){ background:#9af93e;top:200px; left: 0;border: 1px solid;border-radius: 20px;}
    #content div:nth-child(8){background:#eef93e; top:200px;left: 100px;border: 1px solid;border-radius: 20px; }
    #content div:nth-child(9){ background:#f9843e; top:200px; left:200px;border: 1px solid;border-radius: 20px; }
    #content .draging{ position: absolute;}
</style>
<body>
<div id="content">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
    <div>G</div>
    <div>H</div>
    <div>I</div>
</div>
<script type="text/javascript">
    var content = document.getElementById(‘content‘);
    var items = content.querySelectorAll(‘div‘);
    console.log(items);
    function itemBox(itemName){
        itemName.onmousedown = function(evt1){
            var e = evt1 || window.event;
            var cloneDiv = document.createElement(‘div‘);
            cloneDiv.innerHTML = itemName.innerHTML;
            cloneDiv.style.backgroundColor = getComputedStyle(itemName).backgroundColor;
            cloneDiv.className = ‘draging‘;
            cloneDiv.style.top = itemName.offsetTop +‘px‘;
            cloneDiv.style.left = itemName.offsetLeft+‘px‘
            content.appendChild(cloneDiv);
            var offsetX = evt1.pageX - cloneDiv.offsetLeft;
            var offsetY = evt1.pageY - cloneDiv.offsetTop;
            document.onmousemove = function(evt){
                var e2 = evt || window.event;
                cloneDiv.style.left = evt.pageX - offsetX +‘px‘;
                cloneDiv.style.top = evt.pageY -offsetY+‘px‘
            }
            document.onmouseup = function(){
                document.onmousemove = null;
                var divs = content.getElementsByTagName(‘div‘);
                console.log(divs.length)
                var min = 800;
                var minDiv = null;
                for(var i=0;i<divs.length-1;i++){
                    var div = divs[i];
                    var dis = distance(cloneDiv,div);
                    if(dis <= min){
                        min = dis;
                        minDiv = div;
                    }
                }
                var tmpInnerHTMl = minDiv.innerHTML;
                minDiv.innerHTML = itemName.innerHTML;
                itemName.innerHTML = tmpInnerHTMl;
                var tmpColor = getComputedStyle(minDiv).backgroundColor;
                minDiv.style.backgroundColor = getComputedStyle(itemName).backgroundColor;
                itemName.style.backgroundColor = tmpColor;
                content.removeChild(cloneDiv)
                document.onmouseup = null;
            }
            return false;
        }
    }
    for(var i = 0; i < items.length; i++){
        itemBox(items[i]);
    }
    function distance(div1,div2) {
        var a = div1.offsetLeft - div2.offsetLeft;
        var b = div1.offsetTop - div2.offsetTop;
        var c = Math.sqrt(a*a+b*b); 
        return c;
    }
</script>
</body>
</html>

以上是关于九宫格拖拽与互换的主要内容，如果未能解决你的问题，请参考以下文章

22-1 拖拽与烟花案例

react 表格单元格拖拽

react-dnd 拖拽九宫格

想用vb做个排座位软件，实现了两个文本框的拖拽和位置互换，但50多个的用这个办法显然不行。望高手指点。

HTML5Drag&DropAPI

Winform图片移动与缩放