js拖拽元素并保存刷新

最新推荐文章于 2022-11-07 22:06:44 发布

wgod

最新推荐文章于 2022-11-07 22:06:44 发布

阅读量587

点赞数

本文链接：https://blog.csdn.net/weixin_44324124/article/details/110229205

版权

h5 新特性 draggable，可实现简单拖拽。拖拽完成后，本机存储dom字符串的cookie，下次打开实现数据刷新。

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <style>
        .box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #ff0000;
            margin: 40px auto 0 auto;
            line-height: 100px;
            text-align: center;
            color: #fff0df;
        }

        #container {}

        #container>div {
            height: 200px;
            width: 200px;
            flex: 1;
            border: 1px solid #000000;
            padding-top: 20px;
            text-align: center;
        }

        tr {
            border: 1px solid black;
            padding: 5px;
            text-align: center;
        }

        td {
            border: 1px solid black;
            padding: 5px;
            text-align: center;
        }

        span {
            display: block;
            width: 40px;
            height: 25px;
            background: pink;
            line-height: 25px;
            margin: 10px;
            padding: 10px;
            border-radius: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <table id="container"
        style="font-size: 13px;width: 100%;border-collapse: collapse;padding: 20px;margin-left: auto;margin-right: auto;line-height: 40px;">

        <thead>
            <tr>
                <th>评分指标</th>
                <th>得分</th>
                <th>二阶评价指标</th>
                <th>得分</th>
                <th>得分</th>
                <th>得分</th>
            </tr>
        </thead>
        <tr>
            <td><span>123</span></td>
            <td>
                <span draggable="true">哈哈哈</span>
                <span>奥奥奥</span>
                <span>算是啥</span>
            </td>
            <td><span>123</span></td>
            <td><span>123</span></td>
            <td><span>123</span></td>
            <td><span>123</span></td>

        </tr>
        <tr>
            <td><span>123</span></td>
            <td><span>123</span></td>
            <td><span>123</span></td>
            <td><span>123</span></td>
            <td><span>123</span></td>
            <td><span>123</span></td>
        </tr>
        <tr>
            <td><span>123</span></td>
            <td><span>123</span></td>
            <td><span>123</span></td>
            <td><span>123</span></td>
            <td><span>123</span></td>
            <td><span>123</span></td>
        </tr>


    </table>
    <script>
        function setCookie(name, value) {
            var Days = 30;
            var exp = new Date();
            exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
            document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
        }
        function getCookie(name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }
        let domClone=getCookie('domStr')
        // console.log(domClone);
        if(domClone){
            document.body.innerHTML=domClone
        }
        function nodeToString(node) {
            //createElement()返回一个Element对象
            var tmpNode = document.createElement("div");
            //appendChild()  参数Node对象   返回Node对象  Element方法
            //cloneNode()  参数布尔类型  返回Node对象   Element方法
            tmpNode.appendChild(node.cloneNode(true));
            var str = tmpNode.innerHTML;
            tmpNode = node = null; // prevent memory leaks in IE  
            return str;
        }
        function saveDom() {
            // 鼠标抬起后，元素存放的位置，这里除了数据更新
            let domTree = document.getElementById('container')
            let domStr = nodeToString(domTree)
            //这里是要存起来的dom字符串！！！
            // console.log(domStr);
            setCookie('domStr',domStr)
        }
        const [conatiner] = [
            document.getElementById('container')
        ];
        window.onmousedown = function (e) {
            let moveDom = e.target
            moveDom.setAttribute('draggable', 'true')
            moveDom.ondragstart = function (e) {
                conatiner.style.backgroundColor = 'rgba(255,0,0,.1)';
                // e.dataTransfer.setData('id', 'div');
            }
            moveDom.ondrag = function (e) {

            }
            moveDom.ondragend = function (e) {
                conatiner.style.backgroundColor = 'rgba(255,0,0,0)';
            }
            conatiner.ondragenter = function (e) {
                e.preventDefault();
                e.target.style.backgroundColor = 'rgba(255,0,0,.3)';
            }
            conatiner.ondragleave = function (e) {
                e.preventDefault();
                e.target.style.backgroundColor = 'rgba(255,0,0,0)';
            }
            //目标对象容许被拖拽元素拖拽进来 默认不容许
            conatiner.ondragover = function (e) {
                e.preventDefault();
            }
            //目标对象接受被拖拽元素放下
            conatiner.ondrop = function (e) {
                const target = e.target;
                target.appendChild(moveDom);
                saveDom()
            }
        }

    </script>
</body>

</html>

wgod

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js拖拽元素并保存刷新

h5 新特性 draggable，可实现简单拖拽。拖拽完成后，本机存储dom字符串的cookie，下次打开实现数据刷新。<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" c.
复制链接

扫一扫