原生js配合cookie制作保存路径的拖拽


Posted in Javascript onDecember 29, 2015

主要是运用了原生js封装了一个cookie,然后使用了三个事件做拖拽,分别是onmousedown,onmousemove,onmouseup,这三个事件其中两个需要添加事件对象,也就是event,事件对象是一个不兼容的东西,所以需要处理兼容性的问题,也就是oEvent = ev || event; 通过事件对象,获取鼠标点击屏幕时的那个点,然后减去被拖拽物体距离左边的一个距离,最终就可以获取到当前点击位置距离物体的距离。

最后在onmouseup的时候做了一个return false,主要是为了阻止在高版本浏览器下选中文字。通过cookie里面的addCookie方法,把物体拖动停止时的位置存在了cookie里面,然后在页面加载的时候就调用getCookie方法,取到物体所在的位置,也就做了一个用cookie存位置的拖拽。

如有下边的html:

<div id="drag">拖动我</div>

CSS:

#drag{width: 100px; height: 100px; background: red; position: absolute; top: 0; left: 0;cursor:move;}

使用用js实现拖动的代码如下:

function addCookie(name, value, iDay) {
  var oDate = new Date();
  oDate.setDate(oDate.getDate() + iDay);
  document.cookie = name + '=' + value + '; path=/; expires=' + oDate;
}

function getCookie(name) {
  var arr = document.cookie.split('; ');
  for (var i = 0; i < arr.length; i++) {
    var arr2 = arr[i].split('=');

    return (arr2[0] == name) && arr2[1]
  }
  return '';
}

window.onload = function () {
  var oDiv = document.getElementById('drag');
  drag(oDiv);

  var move_by = getCookie('move_cood');
  if (move_by) {
    var str = eval('(' + move_by + ')');

    oDiv.style.left = str[0] + 'px';
    oDiv.style.top = str[1] + 'px';
  }

  function drag(obj) {
    obj.onmousedown = function (ev) {
      var oEvent = ev || event;
      var disX = oEvent.clientX - obj.offsetLeft,
  disY = oEvent.clientY - obj.offsetTop;

      document.onmousemove = function (ev) {
        var oEvent = ev || event;

        obj.style.left = oEvent.clientX - disX + 'px';
        obj.style.top = oEvent.clientY - disY + 'px';
      };

      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;

        obj.releaseCapture && obj.releaseCapture();

        addCookie('move_cood', '[' + obj.offsetLeft + ',' + obj.offsetTop + ']', 10);
      };

      obj.setCapture && obj.setCapture();
      return false;
    };
  }
};

以上就是原生js配合cookie制作保存路径的拖拽实现效果,希望对大家的学习有所启发。

Javascript 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
一种新的javascript对象创建方式Object.create()
Dec 28 #Javascript
JavaScrip常见的一些算法总结
Dec 28 #Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 #Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 #Javascript
Bootstrap实现响应式导航栏效果
Dec 28 #Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 #Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 #Javascript
You might like
ADODB类使用
2006/11/25 PHP
PHP 上传文件大小限制
2009/07/05 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
参观监狱心得体会
2014/01/02 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB