原生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 相关文章推荐
Js获取事件对象代码
Aug 05 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
js如何打印object对象
Oct 16 Javascript
Angular的事件和表单详解
Dec 26 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
Vue中的字符串模板的使用
May 17 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
一种新的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
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python中常用信号signal类型实例
2018/01/25 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
客户服务经理岗位职责
2014/01/29 职场文书
司法所长先进事迹
2014/06/02 职场文书
2014年环卫工作总结
2014/11/22 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis