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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
JS二分查找算法详解
Nov 01 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
详解webpack 入门与解析
Apr 09 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
You might like
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
php开发工具有哪五款
2015/11/09 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP自定义多进制的方法
2016/11/03 PHP
php unlink()函数使用教程
2018/07/12 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
Javascript----文件操作
2007/01/18 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
python日期相关操作实例小结
2019/06/24 Python
jupyter实现重新加载模块
2020/04/16 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
解决python3输入的坑——input()
2020/12/05 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
创业融资计划书
2014/04/25 职场文书
如何写早恋检讨书
2014/09/10 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年党总支工作总结
2015/05/25 职场文书