【代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{width:300px;height:300px;border:1px red solid;float:left;text-align: center;font:bold 60px/98px '微软雅黑';position:absolute;left:calc(50% - 150px);top:calc(50% - 150px);}
        #box div{width: 98px;height: 98px;border: 1px red solid;float: left;}
        #box div:hover{background: linear-gradient(#f60,#f0c);opacity:0.8;}
    </style>
    <script>
        window.onload = function(){
            var divs = document.getElementById("box").getElementsByTagName("div")
            for(var i = 0;i < divs.length;++i){             //查询divs数组中元素的个数
                var div = divs[i];                          //将每个元素内的div值,给变量div
                div.draggable = true;                       //将这个div设置为可拖动
                
                div.ondragstart = function () {             //当开始拖动这个div
                    var id = event.target.id;               //将当前拖动的div的id赋予给变量名id
                    event.dataTransfer.setData("id",id);    //设置拖放值的格式为一个id
                    /*
                     * DataTransfer有下面的属性和方法:
                     * types:返回数据的格式;
                     * getData(<format>):返回指定格式数据;
                     * setData(<format>, <data>):设置指定格式数据;
                     * clearData(<format>):移除指定格式数据;
                     * files:返回已经投放的文件数组。
                     */
                }

                
                div.ondragover = function () {          //div元素正在被拖动时
                    event.preventDefault();             //告诉web浏览器阻止执行其他动作
                }

                div.ondrop = function () {              //当鼠标拖动完成时
                    var srcId = event.dataTransfer.getData("id");       //获取当前拖动div元素id的值给srcId
                    var targetId = event.target.id;                     //

                    var srcContent = document.getElementById(srcId).innerHTML;
                    var targetContent = document.getElementById(targetId).innerHTML;

                    document.getElementById(srcId).innerHTML = targetContent;
                    document.getElementById(targetId).innerHTML = srcContent;
                }
            }

        }
    </script>
</head>
<body>
    <div id="box">
        <div id="n1">1</div>
        <div id="n2">2</div>
        <div id="n3">3</div>
        <div id="n4">4</div>
        <div id="n5">5</div>
        <div id="n6">6</div>
        <div id="n7">7</div>
        <div id="n8">8</div>
        <div id="n9">9</div>
        <div style="clear: left;border:0px"></div>
    </div>
</body>
</html>