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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
jQuery侧边栏实现代码
May 06 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
Jqprint实现页面打印
Jan 06 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
layui select动态添加option的实例
Mar 07 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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实现mysql同步的实现方法
2009/10/21 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python之父谈Python的未来形式
2016/07/01 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
python机器学习库常用汇总
2017/11/15 Python
python实现树形打印目录结构
2018/03/29 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
django 类视图的使用方法详解
2019/07/24 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
如何基于线程池提升request模块效率
2020/04/18 Python
北大自主招生自荐信
2013/10/19 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
电力培训心得体会
2014/09/02 职场文书
中学团支部工作总结
2015/08/13 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript