js拖拽的原型声明和用法总结

下面是自己写的一个关于js的拖拽的原型声明：代码如下

需要注意的问题包括:

1.this的指向到底是指向谁--弄清楚所指的对象

2.call()方法的使用

3.直接将父级原型赋给子级与使用for将其赋给子级有什么区别？

比如：

for(var i in Drag.prototype)
{
  LimitDrag.prototype[i]=Drag.prototype[i];----------子级发生改变，其父级并不会受到影响
}

 LimitDrag.prototype=Drag.prototype；---------直接将原型赋给子级，会导致当子级发生改变时，其父级也会随之而改变。

代码如下

<html>
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽--面向对象</title>
<script>
window.onload=function()
{
  new Drag('div1');
  new LimitDrag('div2');
}
function Drag(id)
{
   var _this=this;//这个this表示p1
   this.disx=0;
   this.disy=0;
   this.oDiv=document.getElementById(id);
   this.oDiv.onmousedown=function(ev){//按下的时候有个事件，传递给下面的事件
    _this.fnDown(ev);
    return false;
   }
};
Drag.prototype.fnDown=function(ev)
{
    var _this=this;
    var oEvent=ev||event;
    this.disx=oEvent.clientX-this.oDiv.offsetLeft;
    this.disy=oEvent.clientY-this.oDiv.offsetTop;
    document.onmousemove=function(ev){//移动的时候有个事件
       _this.fnMove(ev);
    }
    document.onmouseup=function(){
       _this.fnUp();
    }
};
 Drag.prototype.fnMove=function(ev)
{
      var oEvent=ev||event;
      this.oDiv.style.left=oEvent.clientX-this.disx+'px';
      this.oDiv.style.top=oEvent.clientY-this.disy+'px';
};
Drag.prototype.fnUp=function()
{
     document.onmousemove=null;
     document.onmouseup=null;
};
//继承Drag的所有属性
function LimitDrag(id)
{
    Drag.call(this,id);//这个this指LimitDrag new的对象
}
//得到Drag的方法,遍历其原型
for(var i in Drag.prototype)
{
  LimitDrag.prototype[i]=Drag.prototype[i];
}
//改变Drag的fnMove的方法
LimitDrag.prototype.fnMove=function(ev)
{
  var oEvent=ev||event;
  var l=oEvent.clientX-this.disx;
  var t=oEvent.clientY-this.disy;
  if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
  {
    l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
  }
  else if(l<0)
  {
    l=0;
  }
   if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)
  {
    t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
  }
  else if(t<0)
  {
    t=0;
  }
   this.oDiv.style.left=l+'px';
   this.oDiv.style.top=t+'px';
}
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • 基于React.js实现原生js拖拽效果引发的思考

    基于React.js实现原生js拖拽效果引发的思考

    一.起因&思路 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置

  • js实现图片放大和拖拽特效代码分享

    js实现图片放大和拖拽特效代码分享

    本文实例讲述了js实现图片放大和拖拽特效代码.分享给大家供大家参考.具体如下: js实现图片放大和拖拽特效是一款非常实用的js特效,实现了图片的放大和拖拽功能,没用用到jquery插件,是用原生javascript实现的,除了点击放大和缩小按钮来控制图片的放大缩小,还可以使用鼠标的滚轮控制图片的缩放. 运行效果图:                               ----------------------查看效果 源码下载----------------------- 小提示:浏览

  • javascript实现PC网页里的拖拽效果

    javascript实现PC网页里的拖拽效果

    几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今天做好的一个很好的效果,可能第二天就要推到重来,算了,不说这些了,还是说说我们今天要讲解的案例吧,不知道大家访问过搜房网没有(完全没有做广告之嫌,搜房网,可以给点广告费不),其中有一个功能产品经理特别喜欢,那,就是下面的这个: 这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖

  • JS组件Bootstrap Table表格行拖拽效果实现代码

    JS组件Bootstrap Table表格行拖拽效果实现代码

    一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2

  • 原生js实现自由拖拽弹窗代码demo

    原生js实现自由拖拽弹窗代码demo

    本文为大家分享了原生弹窗拖拽代码demo,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗拖拽</title> <style> *{margin:0;padding:0;} .box{position: absolute;width: 400

  • 基于jQuery实现拖拽图标到回收站并删除功能

    基于jQuery实现拖拽图标到回收站并删除功能

    本文利用jQuery实现一个拖拽删除桌面小图标的功能,使用起来就像操作系统的回收站一样,我们只需要拖动应用图标至垃圾箱即可删除这个图标,分享给大家,具体实现方法如下 运行效果图: 引入核心文件 这里需要引入jquery,jquery ui,与jquery ui css <link rel="stylesheet" href="assets/css/jquery-ui.css" /> <script src="js/jquery/1.8.3

  • javascript实现移动端上的触屏拖拽功能

    javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

  • JS HTML5实现拖拽移动列表效果

    JS HTML5实现拖拽移动列表效果

    练习HTML5中的拖放API,实现列表拖拽移动!参考文章:JS HTML5拖拽上传图片预览 HTML5拖拽移动列表实现思路:  1.循环设置每个子项的draggable属性,以及设置拖动标记(不会多个或全部子项都移动)  2.每次进入投放区,则检测时候有拖放标记,有则添加dom元素,以此类推 另一种实现思路是:可以利用拖放中DataTransfer对象作为属性,用setData()和getData()方法传递每个拖动的子项的id等数据,找到指定的子项进行移动-.待实验... HTML: //空列

  • JS组件Bootstrap Table表格多行拖拽效果实现代码

    JS组件Bootstrap Table表格多行拖拽效果实现代码

    前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态 二.需求分析 通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的

  • JS拖拽组件学习使用

    JS拖拽组件学习使用

    JS代码需要常写,不然容易生疏,最近虽然一直在看JS的原型,行为委托等知识点,但是动手写代码的量略有减少.本文与大家分享一个拖拽组件,供大家参考,具体内容如下 首先,看一下拖拽的原理. 被拖拽元素位置的变化,left值的变化其实就是鼠标位置水平方向的变化值,e.clientX - 鼠标左键按下时e.clientX. top值的变化其实就是鼠标位置竖直方向的变化值,e.clientY - 鼠标左键按下时e.clientY. 另外就是设置拖拽的范围,上下左右不得超过父元素所在的区域. functio

随机推荐