原生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 jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
vue 自定义的组件绑定点击事件
Apr 21 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
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
Yii学习总结之安装配置
2015/02/22 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
使用javascript插入样式
2016/03/14 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
python 实现判断ip连通性的方法总结
2018/04/22 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
教师求职信范文分享
2013/12/27 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
学校志愿者活动总结
2014/06/27 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
学子宴致辞大全
2015/07/27 职场文书
浅析Python中的套接字编程
2021/06/22 Python
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers