原生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 相关文章推荐
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 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
php Ajax乱码
2008/04/09 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
php object转数组示例
2014/01/15 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
js+css实现打字效果
2020/06/24 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
Python脚本实现格式化css文件
2015/04/08 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python 变量的创建过程详解
2019/09/02 Python
python中有函数重载吗
2020/05/28 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
中学教师实习自我鉴定
2013/09/28 职场文书
培训自我鉴定
2014/01/31 职场文书
行政主管职责范本
2014/03/07 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP