<!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;
width: 200px;
top: 0;
left: 0;
height: 200px;
border: 1px solid green;
background-image: url('./pic.jpg');
background-size: 100% 100%；
}
img {
width: 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>

原生拖拽js利用localstorage保存位置的更多相关文章

  1. 【转】JS容器拖拽效果，并通过cookie保存拖拽各容器的所在位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

    可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...

  3. 拖拽js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HTML5实战与剖析之原生拖拽(一拖拽历史概述)

    提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...

  5. 最好的拖拽js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. H5原生拖拽事件

    使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  8. HTML5原生拖拽/拖放(drag & drop)详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  9. 百度地图API 拖拽或点击地图位置获取坐标

    function setPlace(map,myValue,callback){ function getAddress(){ var pp = local.getResults().getPoi(0 ...

随机推荐

  1. [Code] 中缀式转后缀式

    [Code] 中缀式转后缀式 概要 对于一个可带括号的中缀四则运算表达式, 例如30 + 4 / 2 或 30 / ( 4 + 2 ), 下面代码将分别转换为对应的后缀表达形式 30 4 2 / + ...

  2. HTTP协议报文结构及示例

    HTTP基本架构 下面我们用一张简单的流程图来展示HTTP协议基本架构,以便大家先有个基本的了解. 9.png Web Client可以是浏览器.搜索引擎.机器人等等一切基于HTTP协议发起http请 ...

  3. win10安装mongodb及配置 和 mongodb的基本使用（node环境）

    mongodb安装 下载地址: https://www.mongodb.com/download-center 下载后,我们点击mongodb-win32-x86_64-2008plus-ssl-3. ...

  4. linux主机名为bogon的原因及修改方法

    今天登录linux,发现主机名是bogon,虽然不影响使用,但是看着很不爽,于是想了解一下,为什么会发生这种情况,在csdn上找了到了一个文章,原文如下: 起因:公司网络接口做了接口认证,虚拟机桥接至 ...

  5. dojo表格的一些属性

    dojo表格的属性总结归纳 1.表格无数据提示 data-dojo-props="noDataMessage:'无数据...'" 2.表格的高度自动适应 autoHeight=&q ...

  6. List转换成JSON对象报错（五）

    List转换成JSON对象 1.具体错误如下 Exception in thread "main" java.lang.NoClassDefFoundError: org/apac ...

  7. 基于am3358的蜂鸣器测试

    #include <sys/ioctl.h> #include<stdio.h> #include <fcntl.h> #include <sys/types ...

  8. Linux显示一个二进制文件或可执行文件的完整路径

    Linux显示一个二进制文件或可执行文件的完整路径 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ which halt /sbin/halt

  9. 小白学爬虫-批量部署Splash负载集群

    整体目录如下: study@study:~/文档/ansible-examples$ tree Splash_Load_balancing_cluster Splash_Load_balancing_ ...

  10. BOM（浏览器对象模型）的一些操作

    一个完整的JavaScript实现由三部分组成: ECMAScript:核心,定义语言基础,规定了语言的组成部分(语法,类型,关键字,保留字,对象等) DOM:文档对象模型,·DOM把整个页面映射成一 ...