<!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. 如何架构一个合适的企业API网关

    API Gateway(API GW / API 网关),顾名思义,是出现在系统边界上的一个面向API的.串行集中式的强管控服务,这里的边界是企业IT系统的边界,主要起到隔离外部访问与内部系统的作用. ...

  2. SIFT解析（三）生成特征描述子

    以上两篇文章中检测在DOG空间中稳定的特征点,lowe已经提到这些特征点是比Harris角点等特征还要稳定的特征.下一步骤我们要考虑的就是如何去很好地描述这些DOG特征点. 下面好好说说如何来描述这些 ...

  3. Storm日志分析调研及其实时架构

    1.Storm第一个Demo 2.Windows下基于eclipse的Storm应用开发与调试 3.Storm实例+mysql数据库保存 4.Storm原理介绍 5. flume+kafka+stor ...

  4. Hive分区和桶

    SMB 存在的目的主要是为了解决大表与大表间的 Join 问题,分桶其实就是把大表化成了“小表”,然后 Map-Side Join 解决之,这是典型的分而治之的思想.在聊 SMB Join 之前,我们 ...

  5. HTML入门标签汇总

    HTML入门标签汇总 1.<div></div>用于定义文档的区块,用来划分出独立不同的部分. 2.<h1></h1>数字1-6定义从大到小的标题. 3 ...

  6. Python模拟登录成功与失败处理方式(不涉及前端)

    任务说明: (1) 用户输入用户名,如不存在此用户不能登录: (2) 用户在输入密码时,如果连续输入三次错误,则该用户被锁定一段时间; (3) 用户被锁定一段时间后,可再次进行尝试登录: 程序使用库: ...

  7. Davinci DM6446开发攻略-UBOOT-2009.03移植2 nand flash的烧写

      很长一段时间没有更新博客了,是因为要推出新开发方案和做好客户服务工作,忙得不易乐乎.有关DAVINCI U-BOOT的移植,以前写过一篇u-boot-1.3.4(2008年的),其实和这个u-bo ...

  8. Hi3515支持NFS-ROOT启动

    目前在做Hi3515平台监控项目,前期开发一直使用SDK里推荐的mount nfs方式来调试代码,虽然也算方便,但是我一直觉得用法NFS-ROOT才是最省事的方法,而且最接近最终用户使用环境,因为如果 ...

  9. 如何使用DirectDraw直接显示RGB、YUV视频数据（播放yuv）

    #include "draw.h"void CTest100Dlg::OnButton1() { // TODO: Add your control notification ha ...

  10. mysql学习笔记03 mysql数据类型

    数值型:整数型 小数型字符串型时间和日期类型 数值型①整数型1 2 3 4 81bin表示1位,1Byte表示一个字节1B=8b.1汉字=2字节(1 word = 2 byte)1字节=8位(1 by ...