<!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. 内存映射mmap的几个api及其使用

    内存映射 mmap 内存映射mmap函数的作用是建立一段可以被两个或者多个程度读写的内存段,一个程序对他进行任何修改,对其它程序可见.同样,这个功能可以用在对文件的处理上,mmap函数创建一个指向一个 ...

  2. java代码调用使用cxf搭建的webService服务传递对象

    前边成功创建好一个cxf的webServcie服务,并带了一个无参数的方法.现在进一步尝试了使用带参数的方法,分别测了用String为参数和用自定义的对象为参数. 其中,使用String为参数时和不带 ...

  3. 小说接入UC浏览器内核技术对话（一）

    质辛@灿岩 质辛跟我们说一下那个删除文件的逻辑吧质辛@灿岩  应该不是删除cache下所有文件吧?质辛@智鹰  提供一下我们的临时文件完整路径给 灿岩吧质辛@智鹰  是负责我们ucsdk的 技术对接灿 ...

  4. Netty未来展望

    作为<Netty权威指南(第2版)>的结尾章节,和读者朋友们一起展望下Netty的未来. 1应用范围 随着大数据.互联网和云计算的发展,传统的垂直架构逐渐将被分布式.弹性伸缩的新架构替代. ...

  5. 用vlc搭建简单流媒体服务器（UDP和TCP方式）

    .UDP(legacy)传统模式 .RTP方式 .RTSP方式 RTSP方式是通过RTP进行流媒体数据的传输的,VLC的实现也是基于UDP的.这种方式网上的参考资料比较多,我就不截图了,直接叙述命令行 ...

  6. Django学习-13-simple_tag使用

    一些HTML方法                {{item.event_start | date:"Y-m-d H:i:s"}}                     {{bi ...

  7. stun/turn/ice学习笔记

    stun基本只是用于client探测NAT之后靠近stun server的外网地址,本身不包含应用数据通信的功能,其底层STUN协议通信多是基于UDP的.多个端点之间相互通过信令通道拿到彼此的NAT外 ...

  8. “玲珑杯”ACM比赛 Round #4 B Best couple

    一眼的KM,但是建图的时候记得不用的点设为0,点少的一边补齐,这个非常重要,因为KM追求完全匹配,如果无法完全匹配会非常慢 #include<bits/stdc++.h> using na ...

  9. 2016四川省赛 Floyd-Warshall

    这题真的有毒 首先你忽略 N-M < 100 的条件你就gg吧 其次就算你知道了怎么做之后 还有可能因为写vector或者各种常数大的原因被卡 #include<iostream> ...

  10. sass学习笔记--摘录

    //$a: Helvetica, sans-serif //$b: #333 // //body //font: 100% $a //color: $b //$a: red //body //colo ...