原生js配合cookie制作保存路径的拖拽

最新推荐文章于 2024-09-23 08:37:48 发布

红烧四喜丸子

最新推荐文章于 2024-09-23 08:37:48 发布

阅读量192

点赞数 2

文章标签： javascript html elementui

本文链接：https://blog.csdn.net/weixin_56529964/article/details/125298491

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: radial-gradient(circle at 70% 30%, pink,rgb(205, 48, 186));
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    window.onload = () => {
        var box = document.querySelector('.box')
        if (get('position')) {
            let o = JSON.parse(get('position'))
            box.style.left = o.left + 'px'
            box.style.top = o.top + 'px'
        }
        box.onmousedown = (e) => {
            var disx = e.clientX - box.offsetLeft
            var disy = e.clientY - box.offsetTop
            document.onmousemove = (e) => {
                var x = e.clientX - disx
                var y = e.clientY - disy
                box.style.left = x + 'px'
                box.style.top = y + 'px'
                set('position', JSON.stringify({
                    left: x,
                    top: y
                }))
            }
            document.onmouseup = () => {
                document.onmousemove = null
            }
        }
    }
</script>

</html>

引用的js


function set(name, value, iDay) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + iDay);

    document.cookie = `${name}=${value}; path=/;expires=${oDate}`;
}

function get(name) {
    let arr = document.cookie.split('; ');

    for (var i = 0; i < arr.length; i++) {
        let item = arr[i].split('=');

        if (item[0] == name) {
            return item[1];
        }
    }
}

function deleteCookie(name) {
    setCookie(name, 'ccc', -1)
}