快活林资源网

js实现拖拽效果（构造函数）
网络编程 2025/1/17 佚名
3 1
快活林资源网 Design By www.csstdc.com

一、利用构造函数模式进行开发的优势

　　1、业务逻辑思路更清晰；

　　2、避免了大量全局变量的产生，只有一个全局变量，相当于就是这一功能模块向外暴露的唯一接口；

      3、如果结合模块化开发，很方便就可以把自定义的模块加到统一modules中，只要自定义的模块名不冲突，使用起来也不会互相干扰；

      4、代码可维护性好，利人利己；

二、下面就利用这一模式，以拖拽为实例，进行讲解。
1、html，如下：

<body>
　　<div class="box" id="box1"><div class="main"><div class="bar">拖拽区</div><div class="content">内容区块</div></div></div>
　　<div class="box" id="box2"><div class="main"><div class="bar">拖拽区</div><div class="content">内容区块</div></div></div>
　　<div class="box" id="box3"><div class="main"><div class="bar">拖拽区</div><div class="content">内容区块</div></div></div>
</body>

2、css

<style type="text/css">
  .box{position:absolute;left:100px;top:100px;padding: 5px;box-shadow:2px 2px 4px #666666; font-size:12px;}
  #box2{left:500px;}
  #box3{left:900px; }
  .main{border:1px solid #a0b3d6;background-color: #fff; }
  .bar{line-height:24px;padding-left:5px;border-bottom:1px solid #a0b3d6;background-color:#beceeb;cursor:move;}
  .content{padding: 10px 5px;height:200px;width:250px;}
</style>

3、js

// 定义Drag构造函数，并设置每个实例的特权属性（也就是将来要创建的每个实例对象私有的属性）；
function Drag(bar, target) {
  // 此处的bar是指触发拖拽事件的对象；
  this.bar = bar;

  // 此处的target是值实际上被拖动的对象；
  this.target = target;

  // 这个flag相当于是一个开关，用于判断事件是否能够执行；
  this.flag = false;
}
// 构造函数原型上添加方法，也是为其实例添加公用方法公用方法；
Drag.prototype = {
  // 重新声明原型的constructor属性，也就是为实例指定正真的创建者；这里不重新指定也没问题，就是为了。。。
  constructor : Drag,

  // 初始化每个实例的属性，为绑定事件做好准备；
  init : function(){
    // 这边的this其实是指调用这个init函数方法的那个对象，也就是我们所创建的实例；
    // 这么写有好处，代码执行到绑定事件那一块再详细的讲；
    var temp = this;

    // 获取实例对象上最先设定的样式值，这边就是left和top属性；
    temp.left = temp.getCss(temp.target, "left");
    temp.top = temp.getCss(temp.target, "top");

    // 预先声明下面要用的到值，这边是指储存鼠标点下去的瞬间鼠标相对于屏幕的位置（clientX、clientY）
    temp.mousePosX = null;
    temp.mousePosY = null;

    // 发出为实例对象绑定事件的命令；
    temp.bindEvent();
  },
  //
  getCss : function(o , prop){
    // Dom对象的style属性指向的对象只能获得嵌入式样式的值，比如<a style="..."></a>，这种写在元素内部的可以获得；
    // 但是通过外联样式表和内联样式表设置的样式值，只能通过以下方法获得，currentStyle对应的是Ie，另一个对应的是其他浏览器；
    return o.currentStyle "px";
        temp.target.style.top = parseInt(temp.top) + e.clientY - temp.mousePosY + "px";
      }
    });

    // 鼠标放开后事件
    document.addEventListener('mouseup', function(e){
      // 鼠标放开后，就把这个开关了，就说明拖动对象不能被拖动了；
      temp.flag = false;

      // 记录被拖动对象的被拖动后的位置
      temp.left = temp.getCss(temp.target, "left");
      temp.top = temp.getCss(temp.target, "top");
    });
  }
}

// 获取Dom元素，oBar是指拖动条，oBox是指实际上拖拽对象；
var oBox = document.getElementsByClassName('box');
var oBar = document.getElementsByClassName('bar');
// 创建实例对象，注意参数顺序；
var drag1 = new Drag(oBar[0], oBox[0]);
var drag2 = new Drag(oBar[1], oBox[1]);
var drag3 = new Drag(oBar[2], oBox[2]);
// 调用实例对象上的init方法，为实例对象指定设计好的操作流程；
drag1.init();
drag2.init();
drag3.init();

具体的过程都通过js注释说明了，希望能够帮助大家更好地利用构造函数实现拖拽效果。

快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com