原生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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
js密码强度校验
Nov 10 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
python复制文件的方法实例详解
2015/05/22 Python
python实现获取Ip归属地等信息
2016/08/27 Python
详解Python多线程
2016/11/14 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
numpy基础教程之np.linalg
2019/02/12 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
python和php学习哪个更有发展
2020/06/17 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
C#面试题
2016/05/06 面试题
企划专员岗位职责
2013/12/09 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python