原生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 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
javascript对象的创建和访问
Mar 08 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
vue自动化表单实例分析
2018/05/06 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
js实现磁性吸附的示例
2020/10/26 Javascript
Python内存读写操作示例
2018/07/18 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
浅析Python requests 模块
2020/10/09 Python
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
生物科学专业职业规划书范文
2014/02/11 职场文书
科级干部考察材料
2014/02/15 职场文书
企业环保标语
2014/06/10 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
农村老人去世追悼词
2015/06/23 职场文书
离婚协议书格式范本
2016/03/18 职场文书
学生安全责任协议书
2016/03/22 职场文书