jQuery使用drag效果实现自由拖拽div


Posted in Javascript onJune 11, 2015

偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下。

先说一下实现原理及要点,最主要的有三步。第一步是mousedown事件,鼠标mousedown的时候记录此时的鼠标X轴和Y轴以及拖拽框的left和top,并且给拖拽标记赋值true,代表拖拽动作就绪。第二步是mousemove事件,此时动态获取鼠标的X轴和Y轴,然后计算出来拖拽框新的left和top并赋值使其实现拖拽效果。第三步是mouseup事件,鼠标弹起时给拖拽标记赋值false,拖拽动作完成。

html代码如下:

<div class="divWrap" id="move1" style="width: 200px; height: 200px; background: Green; border: 1px solid red; position: absolute; top: 100px; left: 100px; cursor: move; -moz-user-select: none; -webkit-user-select: none;"></div>
<div class="divWrap" style="width: 200px; height: 200px; background: brown; border: 1px solid red; position: absolute; top: 300px; left: 100px;">
  <h3 id="move2" style="height: 45px; line-height: 45px; font-size: 18px; background: red; margin: 0; cursor: move; -moz-user-select: none; -webkit-user-select: none;">Title--Move</h3>
</div>

js代码如下:

(function($) {
  $.fn.dragDiv = function(divWrap) {
    return this.each(function() {
      var $divMove = $(this);//鼠标可拖拽区域
      var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//整个移动区域
      var mX = 0, mY = 0;//定义鼠标X轴Y轴
      var dX = 0, dY = 0;//定义div左、上位置
      var isDown = false;//mousedown标记
      if(document.attachEvent) {//ie的事件监听,拖拽div时禁止选中内容,firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
        $divMove[0].attachEvent('onselectstart', function() {
          return false;
        });
      }
      $divMove.mousedown(function(event) {
        var event = event || window.event;
        mX = event.clientX;
        mY = event.clientY;
        dX = $divWrap.offset().left;
        dY = $divWrap.offset().top;
        isDown = true;//鼠标拖拽启动
      });
      $(document).mousemove(function(event) {
        var event = event || window.event;
        var x = event.clientX;//鼠标滑动时的X轴
        var y = event.clientY;//鼠标滑动时的Y轴
        if(isDown) {
          $divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div动态位置赋值
        }
      });
      $divMove.mouseup(function() {
        isDown = false;//鼠标拖拽结束
      });
    });
  };
})(jQuery);
//
$(document).ready(function() {
  $("#move1").dragDiv();//拖拽整个div
  $("#move2").dragDiv(".divWrap");//拖拽div头部
});

最后要说明一下,在开始拖拽动作之前,要禁止选中内容,否则影响拖拽效果。firefox和chrome可以通过css来设置:{-moz-user-select: none; -webkit-user-select: none;},ie本来也可以直接在html里写一个onselectstart="return false",但似乎chrome受了点影响,所以决定取消这个写法,然后在js里为ie浏览器写一个onselectstart事件。

这个小插件只是简单实现拖拽效果,但兼容性很好,里面也用到了一些知识点和技巧。当然也可以借助这个插件或里面的思想继续扩展,写一个比较完善的拖拽插件(如:Draggable和Droppable)。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
超轻量级的js时间库miment使用解析
Aug 02 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
javascript 常见功能汇总
Jun 11 #Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 #Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 #Javascript
JQuery遍历DOM节点的方法
Jun 11 #Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 #Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 #Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 #Javascript
You might like
PHP 程序员的调试技术小结
2009/11/15 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
python一键升级所有pip package的方法
2017/01/16 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python多线程正确用法实例解析
2020/05/30 Python
python如何写try语句
2020/07/14 Python
工程师自我评价怎么写
2013/09/19 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
少先队入队活动方案
2014/02/08 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
校长个人总结
2015/03/03 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python