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 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
react项目从新建到部署的实现示例
Feb 19 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
封装一个PDO数据库操作类代码
2009/09/09 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
详解Python的Django框架中的中间件
2015/07/24 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
django rest framework serializers序列化实例
2020/05/13 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
总经理岗位职责描述
2014/02/08 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
个人总结格式范文
2015/03/09 职场文书
工地食品安全责任书
2015/05/09 职场文书
四风之害观后感
2015/06/09 职场文书
毕业赠语大全
2015/06/23 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸