原生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 操作option的实现代码
Mar 03 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
一种新的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的输入输出流
2007/02/14 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
laravel学习教程之关联模型
2016/07/30 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php实现等比例压缩图片
2018/07/26 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python编程实现归并排序
2017/04/14 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
django配置app中的静态文件步骤
2020/03/27 Python
自学python用什么系统好
2020/06/23 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
我的中国梦演讲稿300字
2014/08/19 职场文书
学生吸烟检讨书
2014/09/14 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
python套接字socket通信
2022/04/01 Python