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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
JavaScript文档对象模型DOM
Nov 20 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+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP XML数据解析代码
2010/05/26 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python守护进程(daemon)代码实例
2015/03/06 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
带你了解python装饰器
2017/06/15 Python
python 获取等间隔的数组实例
2019/07/04 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
班干部竞选演讲稿
2014/04/24 职场文书
大一新生检讨书
2014/10/29 职场文书
倡议书的格式写法
2015/04/28 职场文书
芙蓉镇观后感
2015/06/10 职场文书
百年校庆感言
2015/08/01 职场文书
学校运动会感想
2015/08/10 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书