zoukankan      html  css  js  c++  java
  • 原生拖拽js利用localstorage保存位置

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

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <Style>
    #wrap {
    position: absolute;
    200px;
    top: 0;
    left: 0;
    height: 200px;
    border: 1px solid green;
    background-image: url('./pic.jpg');
    background-size: 100% 100%;
    }

    img {
    100%;
    height: 100%;
    }
    </Style>
    </head>

    <body>
    <div id='wrap'></div>
    <script>
    var drag = {
    dragbox: function () {
    var y = 0,
    x = 0;
    var node = document.getElementById('wrap')
    node.style.top = Number(localStorage.getItem('y')) - node.offsetHeight / 2 + 'px'
    node.style.left = Number(localStorage.getItem('x')) - node.offsetWidth / 2 + 'px'//读取本地存储的位置信息给div设置位置
    node.onmousedown = function (e) {
    node.onmousemove = function (e) {
    y = e.clientY;
    x = e.clientX;

    console.log(x, y)

    node.style.top = y - node.offsetHeight / 2 + 'px'
    node.style.left = x - node.offsetWidth / 2 + 'px'
    document.onmouseup = function () {
    localStorage.setItem('x', x)
    localStorage.setItem('y', y)
    node.onmousemove = null;
    }
    }
    }
    }

    }
    drag.dragbox()
    </script>
    </body>

    </html>
  • 相关阅读:
    Metadata Lock原理5
    Seconds_Behind_Master
    Metadata Lock原理4
    MySQL Troubleshoting:Waiting on query cache mutex 腾讯数据库工程师:幕南风
    Metadata Lock原理2
    Metadata Lock原理1
    Online DDL与pt-online-schema-change
    Solaris 安装JDK
    RAID 概述
    4K Block Size的Device和 Aligned IO
  • 原文地址:https://www.cnblogs.com/zzh965390267/p/8249737.html
Copyright © 2011-2022 走看看