<!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. R实战 第三篇：数据处理

    在实际分析数据之前,必须对数据进行清理和转化,使数据符合相应的格式,提高数据的质量.数据处理通常包括增加新的变量.处理缺失值.类型转换.数据排序.数据集的合并和获取子集等. 一,增加新的变量 通常需要 ...

  2. 转载 git Unknown SSL protocol error in connection to github.com:443

    1.执行命令:git pull –progress –no-rebase -v "origin",报错,如图1 fatal: unable to access 'https://g ...

  3. centos7安装zabbix3.2.4

    系统:CentOS Linux release 7.2.1511 (Core) zabbix:3.2.4 一.yum -y install httpd mysql mysql-server mysql ...

  4. 【前端】Vue2全家桶案例《看漫画》之二、完成首页基本样式

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_2.html 项目github地址:https://github.com/shamoyuu/ ...

  5. 第3章 PCI总线的数据交换

    PCI Agent设备之间,以及HOST处理器和PCI Agent设备之间可以使用存储器读写和I/O读写等总线事务进行数据传送.在大多数情况下,PCI桥不直接与PCI设备或者HOST主桥进行数据交换, ...

  6. HighCharts之2D饼图

    HighCharts之2D饼图 1. HighCharts之2D饼图源码 <!DOCTYPE html> <html> <head> <meta charse ...

  7. ucos-ii的任务调度机制

    1.在ucos-ii中,有这么几张表来管理任务. A.OSTCBPrioTbl[],其结构为OS_TCB指针的数组,其元素个数为64, 每一个元素对应一个任务的优先级,ucos-ii最多可以有64个任 ...

  8. Ubuntu Desktop变为Ubuntu Server服务器版的方法

    去Ubuntu官网看到有好几种版本可以下载,alternate(文本安装).desktop9(桌面).netbook(上网本).server(服务器). 使用server版某个理由: 32位的系统可以 ...

  9. WPF基础篇之静态资源和动态资源

    静态资源(StaticResource)指的是在程序载入内存时对资源的一次性使用,之后就不再访问这个资源了. 动态资源(DynamicResource)指的是在程序运行过程中然会去访问资源. 一.定义 ...

  10. [翻译] 比较 Node.js，Python，Java，C＃ 和 Go 的 AWS Lambda 性能

    [翻译] 比较 Node.js,Python,Java,C# 和 Go 的 AWS Lambda 性能 原文: Comparing AWS Lambda performance of Node.js, ...