首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript实现拖放效果

Posted in Javascript onDecember 16, 2015

本文实例为大家分享的是一个拖放的效果，参考的代码，重构以下，加以理解学习。

首先来看效果：

拖动div

javascript实现拖放效果     

拖放状态：未开始 

【程序说明】

拖动原理：其实就是在拖动块上监听mousedown事件，鼠标点击时，通过事件对象获取对应的坐标参数。然后鼠标移动时再监听document上的mousemove事件，获取鼠标的clientX 和clientY坐标然后设置拖动块的left 和 top。

首先是监听mousedown事件

EventUtil.addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));

然后在Start上添加mousemove 和 mouseup 事件 
//监听mousemove 和 mouseup事件
EventUtil.addEventHandler(document, "mousemove", this._fM);
EventUtil.addEventHandler(document, "mouseup", this._fS);

鼠标移动时，设置拖动块的left 和 top 属性 ：

if(!this.LockX)this.Drag.style.left = iLeft + "px";
 if(!this.LockY)this.Drag.style.top = iTop + "px";

水平和垂直锁定：通过判断LockX 和lockY属性来限制对于的top 和 left 属性即可。

范围限制锁定：通过计算容器的宽高和拖动块的宽高差值来设定最大left值和top值，来限制拖动块的left值和top值会在一定的范围里。

完整DEMO：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JavaScript拖放效果</title>
 <style type="text/css">
  
 </style>
</head>
<body>
 <div id="drag-wrap" style="height: 300px;margin:10px;border:5px solid #FF8000;background:#8080C0;position: relative;">
   <div class="draggable" id="drag" style="width:100px;height: 100px;position: absolute;top: 100px;left:100px;background:#eee;border:1px solid #aceaac;cursor: move;">拖动div</div>
 </div>
 <input id="idReset" type="button" value="复位" />
 <input id="idLock" type="button" value="锁定全部" />
 <input id="idLockX" type="button" value="锁定水平" />
 <input id="idLockY" type="button" value="锁定垂直" />
 <input id="idLimit" type="button" value="范围锁定" />
 <input id="idLimitOff" type="button" value="取消范围锁定" />
 <br />拖放状态：<span id="idShow">未开始</span>
 <script type="text/javascript">
  /**
   *工具函数
   */
   var isIE = (document.all) ? true : false ;
 
   var $$ = function(id){
    return "string" == typeof id ? document.getElementById(id) : id;
   };
 
   var Class = {
   create: function() {
    return function() { this.initialize.apply(this, arguments); }
   }
  };
 
  var Extend = function(destination,source){
   for(var property in source){
    destination[property] = source[property];
   }
  };
 
  var BindAsEventListener = function(object,func){
   return function(event){
    return func.call(object,event || window.event);
   }
  };
 
  var Bind = function(object,func){
   return function(){
    return func.apply(object,arguments);
   }
  };
 
   /**
   *跨浏览器事件对象
   */
  var EventUtil = {
   //事件注册处理程序
   addEventHandler:function(oTarget,sEventType,fnHandler){
     if(oTarget.addEventListener){
      oTarget.addEventListener(sEventType,fnHandler,false);
     }else if(oTarget.attachEvent){
      oTarget.attachEvent("on"+sEventType,fnHandler);
     }else{
      oTarget["on"+sEventType] = fnHandler;
     }
    },
    //事件移除处理程序
    removeEventHandler:function(oTarget,sEventType,fnHandler){
     if(oTarget.removeEventListener){
      oTarget.removeEventListener(sEventType,fnHandler,false);
     }else if(oTarget.detachEvent){
      oTarget.detachEvent("on"+sEventType,fnHandler);
     }else{
      oTarget["on"+sEventType] = null;
     }
    },
    getEvent:function(event){
     return event ? event : window.event;
    },
    getTarget:function(event){
     return event.target || event.srcElement;
    }
  }; 
 
  /**
   *拖放程序
   */
   var Drag= Class.create();
 
   Drag.prototype = {
    //初始化对象
    initialize:function(drag,options){
     this.Drag = $$(drag);//拖放对象
     this._x = this._y = 0;//记录鼠标相对于拖放对象的位置
     //事件对象(用于绑定移除事件)
     this._fM = BindAsEventListener(this, this.Move);
    this._fS = Bind(this, this.Stop);
    this.Drag.style.position = "absolute";
    this.marginLeft = this.marginTop = 0;//记录margin
    //设置参数
    this.setOptions(options);
    //获取相关参数及类型转换
    this.Limit = !!this.options.Limit;//转换为布尔型
    this.mxLeft = parseInt(this.options.mxLeft);
    this.mxRight = parseInt(this.options.mxRight);
    this.mxTop = parseInt(this.options.mxTop);
    this.mxBottom = parseInt(this.options.mxBottom);
 
    this.Lock = !!this.options.Lock;
    this.LockX = !!this.options.LockX;
    this.LockY = !!this.options.LockY;
 
    this.onStart = this.options.onStart;
    this.onMove = this.options.onMove;
    this.onStop = this.options.onStop;
 
    this._Handle = $$(this.options.Handle) || this.Drag;
    this._mxContainer = $$(this.options.mxContainer) || null;
    //监听拖动对象mousedown事件
    EventUtil.addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));
 
    },
    //准备拖动 
    Start:function(oEvent){
     if(this.Lock){return;}//如果锁定则不执行
     //记录mousedown触发时鼠标相对于拖放对象的位置
     this._x = oEvent.clientX - this.Drag.offsetLeft;
    this._y = oEvent.clientY - this.Drag.offsetTop;
    //监听mousemove 和 mouseup事件
    EventUtil.addEventHandler(document, "mousemove", this._fM);
    EventUtil.addEventHandler(document, "mouseup", this._fS);
    }, 
    //拖动
    Move:function(oEvent){
     //设置移动参数
     var iLeft = oEvent.clientX - this._x , iTop = oEvent.clientY - this._y;
     //设置范围限制
     if(this.Limit){
      //设置范围参数
     var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
     //如果设置了容器，再修正范围参数
     if(!!this._mxContainer){
      mxLeft = Math.max(mxLeft, 0);
      mxTop = Math.max(mxTop, 0);
      mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
      mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
     };
     //修正移动参数
     iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
     iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
     }
     //XY锁定
     if(!this.LockX)this.Drag.style.left = iLeft + "px";
    if(!this.LockY)this.Drag.style.top = iTop + "px";
    //执行附加程序
    this.onMove();
    },
    //停止拖动
    Stop:function(){
    EventUtil.removeEventHandler(document, "mousemove", this._fM);
    EventUtil.removeEventHandler(document, "mouseup", this._fS);
    //执行附加程序
    this.onStop();
    },
    //设置默认参数
    setOptions:function(options){
     this.options = {//默认值
     Handle:   "",//设置触发对象（不设置则使用拖放对象）
     Limit:   false,//是否设置范围限制(为true时下面参数有用,可以是负数)
     mxLeft:   0,//左边限制
     mxRight:  9999,//右边限制
     mxTop:   0,//上边限制
     mxBottom:  9999,//下边限制
     mxContainer: "",//指定限制在容器内
     LockX:   false,//是否锁定水平方向拖放
     LockY:   false,//是否锁定垂直方向拖放
     Lock:   false,//是否锁定
     Transparent: false,//是否透明
     onStart:  function(){},//开始移动时执行
     onMove:   function(){},//移动时执行
     onStop:   function(){}//结束移动时执行
    };
    Extend(this.options, options || {});
    }
   };
 
  //初始化拖动对象
  var drag = new Drag('drag',{mxContainer:'drag-wrap',Limit:true,
    onStart: function(){ $$("idShow").innerHTML = "开始拖放"; },
    onMove: function(){ $$("idShow").innerHTML = "left："+this.Drag.offsetLeft+"；top:"+this.Drag.offsetTop; },
    onStop: function(){ $$("idShow").innerHTML = "结束拖放"; }
    });
  $$("idReset").onclick = function(){
   drag.Limit = true;
   drag.mxLeft = drag.mxTop = 0;
   drag.mxRight = drag.mxBottom = 9999;
   drag.LockX = drag.LockY = drag.Lock = false;
   $$("idShow").innerHTML = "复位";
  }
  $$("idLock").onclick = function(){ drag.Lock = true;$$("idShow").innerHTML = "锁定全部";}
  $$("idLockX").onclick = function(){ drag.LockX = true; $$("idShow").innerHTML = "锁定水平";}
  $$("idLockY").onclick = function(){ drag.LockY = true; $$("idShow").innerHTML = "锁定垂直";}
  $$("idLimit").onclick = function(){  drag.mxRight = drag.mxBottom = 200;drag.Limit = true;$$("idShow").innerHTML = "范围锁定"; }
  $$("idLimitOff").onclick = function(){ drag.Limit = false; $$("idShow").innerHTML = "取消范围锁定";}
 </script>
</body>
</html>

以上就是javascript实现拖放效果的代码，希望对大家的学习有所帮助。

javascript实现拖放效果

- Author -

jerrylsxu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
Bootstrap 组件之按钮（二）
May 11 Javascript
jquery 属性选择器（匹配具有指定属性的元素）
Sep 06 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
Vue实现选择城市功能
May 27 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
js实现浏览器打印功能的示例代码
Jul 15 Javascript
原生js实现移动小球（碰撞检测）
Dec 17 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 #Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 #Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 #Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 #Javascript
jQuery进行组件开发完整实例
Dec 15 #Javascript
JavaScript组件开发完整示例
Dec 15 #Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 #Javascript
沙特阿拉伯购物网站(9) 北美洲购物网站(1) 智利购物网站(5) 新西兰购物网站(42) 捷克购物网站(26) 斯洛伐克购物网站(7) 秘鲁购物网站(1) 匈牙利购物网站(11) 菲律宾购物网站(13) 卡塔尔购物网站(3)
You might like
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
再论Javascript的类继承
2011/03/05 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
react写一个select组件的实现代码
2019/04/03 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
JS实现小米轮播图
2020/09/21 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
详细探究Python中的字典容器
2015/04/14 Python
Django框架中方法的访问和查找
2015/07/15 Python
Django实现自定义404，500页面教程
2017/03/26 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
python如何编写win程序
2020/06/08 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
HTML5边玩边学（3）像素和颜色
2010/09/21 HTML / CSS
波兰灯具、照明和LED购物网站：Lampy.pl
2019/03/11 全球购物
英国顶级水晶珠宝零售商之一：Tresor Paris
2019/04/27 全球购物
计算机个人求职信范例
2014/01/24 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
病人慰问信范文
2015/02/15 职场文书
民事答辩状范本
2015/05/21 职场文书
龙猫观后感
2015/06/09 职场文书
社团招新宣传语
2015/07/13 职场文书