原生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 相关文章推荐
javascript 主动派发事件总结
Aug 09 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
理解JavaScript中的Proxy 与 Reflection API
Sep 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
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
asp.net和php的区别点总结
2019/10/10 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
幼儿园教师备课制度
2014/01/12 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python