JavaScript实现简单的拖动效果


Posted in Javascript onJuly 02, 2016

拖动是一件非常酷的事情。你点击某个对象,并按住鼠标不放,将鼠标移动到另一个区域,然后释放鼠标按钮将对象放在这里。
下面是一个简单的案例:
HTML部分:注意,拖动元素一定要为绝对定义,即position = absolute;

<div style="position:absolute;height:100px;width:100px;background:red" class="draggable"></div>

<script src="dome.js"></script>

JS部分(dome.js):

var EventUtil = {
  // 获取事件和目标
  getEvent : function (event) {
    return event ? event : window.event;
  },
  getTarget : function (event) {
    return event.target || event.srcElement;
  },
  // 添加监听事件
  addEvent : function (element, type, handler) {
    if (element.addEventListener)
    {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent)
    {
      element.attachEvent("on" + type, handler);
    }
  },
  // 注销监听事件
  delEvent : function (element, type, handler) {
    if (element.removeEventListener)
    {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent)
    {
      element.detachEvent("on" + type, handler);
    }
  }
}
var DragDrop = function () {
  // 判断DOM元素是否正在被拖动的标志
  var dragging = null;
  // DOM元素左上角与鼠标指针的差值
    diffX = 0;
    diffY = 0;
  function handleEvent(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    switch (event.type) {
      case "mousedown" : 
      // 判断DOM元素的class中是否含有draggable属性
        if (target.className.indexOf("draggable") > -1) {
          dragging = target;
          diffX = event.clientX - target.offsetLeft;
          diffY = event.clientY - target.offsetTop;
        }
      break;

      case "mousemove" : 
        if (dragging != null) {
          target.style.left = event.clientX - diffX + "px";
          target.style.top = event.clientY - diffY + "px";
        }
      break;

      case "mouseup" :
        dragging = null;
      break;

    }
  }
  return {
    enable : function () {
      EventUtil.addEvent(document, "mousedown", handleEvent);
      EventUtil.addEvent(document, "mousemove", handleEvent);
      EventUtil.addEvent(document, "mouseup", handleEvent);
    },
    disable : function () {
      EventUtil.delEvent(document, "mousedown", handleEvent);
      EventUtil.delEvent(document, "mousemove", handleEvent);
      EventUtil.delEvent(document, "mouseup", handleEvent);
    }
  }
}();
DragDrop.enable();

这里需要讲解的是diffX和diffY,它们表示元素左上角与鼠标指针的差值。
diffX = 鼠标的x坐标 - 元素对象的offsetLeft
diffY = 鼠标的y坐标 - 元素对象的offsetTop

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
javascript中的隐式调用
Feb 10 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
vue实现简单学生信息管理
May 30 Javascript
jQuery插件简单学习实例教程
Jul 01 #Javascript
jquery插件autocomplete用法示例
Jul 01 #Javascript
AngularJS 避繁就简的路由
Jul 01 #Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 #Javascript
AngularJS实现分页显示数据库信息
Jul 01 #Javascript
AngularJS内建服务$location及其功能详解
Jul 01 #Javascript
学习Angularjs分页指令
Jul 01 #Javascript
You might like
一个多文件上传的例子(原创)
2006/10/09 PHP
COM in PHP (winows only)
2006/10/09 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Python包和模块的分发详细介绍
2020/06/19 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
容易被忽略的Python内置类型
2020/09/03 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
逃课上网检讨书
2014/02/20 职场文书
王老吉广告词
2014/03/20 职场文书
幸福家庭标语
2014/06/27 职场文书
班主任经验交流材料
2014/12/16 职场文书
承诺书范本
2015/01/21 职场文书
施工员岗位职责
2015/02/10 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python