希望本文对我们学习javascript程序设计具备补助。

JS拖拽组件学习使用,js拖拽组件

JS代码须求常写,不然轻巧生分,近年来就算一贯在看JS的原型,行为委托等知识点,可是入手写代码的量略有缩小。本文与大家分享三个拖拽组件,供我们参谋,具体内容如下

第一,看一下拖拽的原理。

图片 1

被拖拽成分地点的变通,left值的变通莫过于正是鼠标地点水平方向的变化值,e.clientX

  • 鼠标左键按下时e.clientX。
    top值的变型实在正是鼠标地方竖直方向的变化值,e.clientY –
    鼠标左键按下时e.clientY。
    除此以外便是安装拖拽的限定,上下左右不足超越父成分所在的区域。

    function Drag (config){
        this.moveTarget = document.getElementById(config.id);
        if(config.parentId){
          this.targetParent = document.getElementById(config.parentId);
          this.max_left = this.targetParent.clientWidth - this.moveTarget.offsetWidth;
          this.max_top = this.targetParent.clientHeight - this.moveTarget.offsetHeight;
        }else{
          console.log(document.documentElement.clientHeight + "||" + this.moveTarget.offsetHeight)
          this.max_left = document.documentElement.clientWidth - this.moveTarget.offsetWidth - 
            parseInt(this.getStyle(document.body, "border-width"));
          this.max_top = document.documentElement.clientHeight - this.moveTarget.offsetHeight- 
            parseInt(this.getStyle(document.body, "border-width"));
        }      
        this.lock = true;
      }
      Drag.prototype.getStyle = function(element, attr){
        if(element.currentStyle){
          return element.currentStyle[attr];
        }else{
          return window.getComputedStyle(element,null).getPropertyValue(attr)
        }
      }
      Drag.prototype.moDown = function(e){
        e = e || window.event;
        this.clientX = e.clientX;
        this.clientY = e.clientY;
        //鼠标按下时,drag的left值,top值(写在style中或者是css中)
        this.startLeft = parseInt(this.moveTarget.style.left || this.getStyle(this.moveTarget, "left"));
        this.startTop = parseInt(this.moveTarget.style.top || this.getStyle(this.moveTarget, "top"));
        //鼠标按下时,鼠标的clientX值,clientY值
        this.startClientX = e.clientX;
        this.startClientY = e.clientY;
        this.lock = false;
      };
      Drag.prototype.moMove = function(e){
        e = e || window.event;
        if(e.which != 1){
          this.lock = true;
        }
        if(!this.lock){
          var realLeft = this.startLeft + e.clientX - this.startClientX;//实际的移动范围
          var realTop = this.startTop + e.clientY - this.startClientY;
            //rightLeft , rightTop; //left, top 取值(在可移动范围内)
          var rightLeft = realLeft > this.max_left ? this.max_left : ( realLeft > 0 ? realLeft : 0 );
          var rightTop = realTop > this.max_top ? this.max_top : ( realTop > 0 ? realTop : 0 );
          this.moveTarget.style.left = rightLeft + "px";
          this.moveTarget.style.top = rightTop + "px";
        }
      };
      Drag.prototype.moUp = function(e){
        e = e || window.event;
        this.lock = true;
      };
      Drag.prototype.startDrag = function(){
        console.log(this)
        this.moveTarget.onmousedown = function(e){this.moDown(e)}.bind(this);
        this.moveTarget.onmousemove = function(e){this.moMove(e)}.bind(this);
        this.moveTarget.onmouseup = function(e){this.moUp(e)}.bind(this);
      }
    

说明:moDown响应鼠标左键按下操作,moMove响应鼠标移动操作,MoUp响应鼠标抬起操作。

在moMove中加进了e.which推断,e.which ==1
代表鼠标左键按下,那是为了消除,鼠标移除可拖拽范围外,再移回时,无需按下左键,被拖拽成分就能够随着动的Bug。

动用验证:

在利用时,被拖拽成分的id是必须参数,父成分的id(即能够拖拽移动的界定)为可选参数,如若不传递父元素的id,则暗许使用documentElement为可拖拽的限量。

如果传递父元素,请别忘了将父成分的原则性设为position:relative或position:absolute。

在采纳时,先引进拖拽插件的js文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="刘艳">
    <meta name="Keywords" content="关键字">
    <meta name="Description" content="描述">
    <title>Document</title>
    <style>
      *{
        margin:0px;
        padding:0px;
      }
      #content{
        width:600px;
        height:500px;
        position:relative;
        border:5px solid green;
      }
      #drag{
        position:absolute;
        height:100px;
        width:100px;
        top:50px;left:0px;
        background:pink;
        cursor:pointer;
      }
    </style>
  </head>
  <body>
    <div id = "content">
      <div id = "drag" >
      </div> 
    </div>
  </body>
</html>
<script src = "url/drag.js"></script>
<script>
  window.onload = function(){
    var drag = new Drag({id: "drag", parentId: "content"});
    drag.startDrag();

  }

</script>

若果您想在全路窗口中拖拽,请不要设置被拖拽成分的父成分的一定,即,使其绝对body定位。

设若你须求对body定位,不过又供给设置其父成分的position为非static,那么你能够对本插件进行扩充。

梦想本文对大家学习javascript程序设计有所援助。

相关小说

  • 图片 2
    JS完毕的在线调色板实例(附demo源码下载)

    那篇小说主要介绍了JS达成的在线调色板,可完毕响应鼠标点击动态改换调色板颜色的作用,涉及JavaScript针对页面成分属性的动态操作与总括能力,并顺便demo源码供读者下载仿效,需求的相恋的人能够参见下

    2016-03-03

  • 图片 3
    基于three.js编写的贰个等级次序类示例代码

    那篇文章首要给大家介绍了关于基于three.js编写的二个项目类的连锁材料,文中通过演示代码介绍的要命详细,对大家的学习或然工作有着一定的参阅学习价值,须求的敌人们上边随着小编来一齐上学深造啊。

    2018-01-01

  • 图片 4
    详解JavaScript RegExp对象

    RegExp对象是原生JavaScript中代表正则表明式的指标。接下来通过本文给我们详细介绍javascript
    regexp对象知识,要求的的爱人衔考下呢

    2017-02-02

  • 图片 5
    用js完毕终止浏览器对页面HTML的一连剖析即甘休剖判包容firefox

    用js实现终止浏览器对页面HTML的持续分析即结束分析 兼容firefox…

    2007-11-11

  • 图片 6
    兰夜之礼 js项链效果

    兰夜立时要到了,为兰夜进献一份礼物哈。。。必供给扶助CSS3渲染的浏览器

    2012-02-02

  • 图片 7
    JS实现宗旨图轮播效果的艺术详解

    那篇小说首要介绍了JS实现主旨图轮播效果的法子,结合实例情势详细分析了JS主题图轮播效果的准则、落成步骤与连锁操作本事,必要的对象能够参见下

    2016-12-12

  • 图片 8
    十一分主流浏览器的JS复制内容到剪贴板

    那篇文章首要介绍了合营主流浏览器的JS复制内容到剪贴板的落到实处方式及示范,特别实用,有必要的同伴参照他事他说加以考察下

    2014-12-12

  • 图片 9
    Bootstrap基本组件学习笔记之列表组(11)

    这篇小说首要为大家详细介绍了Bootstrap基本组件学习笔记之列表组,具备自然的参照他事他说加以考察价值,感兴趣的同伴们方可参谋一下

    2016-12-12

  • 图片 10
    用javascript达成页内寻找的剧本代码

    用javascript完成页内搜索的脚本代码…

    2007-08-08

  • 图片 11
    JavaScript移除数组内重复成分的措施

    那篇文章主要介绍了JavaScript移除数组内重复成分的格局,实例解析了javascript遍历数组及删除等操作的连锁本事,需求的朋友能够参见下

    2015-03-03

您恐怕感兴趣的小说:

  • JS基于面向对象达成的拖拽库实例
  • js完成拖拽效果
  • div拖拽插件——JQ.MoveBox.js(自制JQ插件)
  • js
    表格排序(编辑+拖拽+缩放)
  • 运用js实现的大概拖拽效果
  • js拖拽一些广阔的笔触措施整理
  • JS组件Bootstrap
    Table表格行拖拽效果落到实处代码
  • JS组件Bootstrap
    Table表格多行拖拽效果实现代码
  • JS弹出可拖拽可关闭的div层完整实例
  • JavaScript
    拖拽翻页效果代码
  • js完毕选用鼠标拖拽切换图片的艺术
  • JS基于面向对象达成的拖拽效能示例

只要传递父成分,请别忘了将父成分的定势设为position:relative或position:absolute。

您大概感兴趣的稿子:

  • 百度Popup.js弹出框进化版 拖拽小框架宣布 包容IE6/7/8,Firefox,Chrome
  • js 表格排序(编辑+拖拽+缩放)
  • 几个js拖拽的职能类和dom-drag.js浅析
  • js 弹出层 并能够拖拽
  • 有关js拖拽上传 [四个拖拽上传修改头像的流水线]
  • div拖拽插件——JQ.Move博克斯.js(自制JQ插件)
  • javascript拖拽上传类库DropzoneJS使用方法
  • js完美的div拖拽实例代码
  • Nodejs+express+html5 达成拖拽上传

JS代码供给常写,不然轻易生疏,近日虽说一向在看JS的原型,行为委托等知识点,但是动手写代码的量略…

以下代码是贰个特别轻便的示范,它能够每一日定位鼠标的坐标,并将结果显示在七个文本框中,借使愿意的话,你能够尝试运维它,包容如今有着的当代浏览器。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GBK”
/>
<title>拖拽</title>
<script type=”text/javascript”
src=”;
<style type=”text/css”>
*{margin: 0;padding: 0;}
#drag{background: #ccc;height: 200px;width: 300px;text-align:
center;line-height: 200px;position: absolute;left: 20px;top: 20px;}
</style>
<body>
<div id=”drag”>
本身能够拖动哦!!
</div>
<script type=”text/javascript”>
//jquery方法拖拽
/**$(function(){
var move = false; //推断是不是被挪动
var a = 0;
var b = 0;
$(“#drag”).mousedown(function(event){
move = true;
a = event.pageX – parseInt($(“#drag”).css(“left”));
b = event.pageY – parseInt($(“#drag”).css(“top”));
})
$(document).mousemove(function(event){
if(move){
var x = event.pageX – a;
var y = event.pageY – b;
$(“#drag”).css({left: x,top: y})
}
}).mouseup(function(){
move = false;
})
})**/
//轻便的js一般方法
/**var drag = document.getElementById(“drag”);
var a = 0;
var b = 0;
drag.onmousedown = function(event){
var event = event||window.event;
a = event.clientX-drag.offsetLeft;
b = event.clientY-drag.offsetTop;
drag.onmousemove = function(event){
var event = event||window.event;
var x = event.clientX – a;
var y = event.clientY – b;
drag.style.left = x + “px”;
drag.style.top = y + “px”;
}
document.onmouseup=function(){
drag.onmousemove = null;
drag.onmouseup = null;
}
}**/
//js面向对象方法
function Drag(obj){
this.drag = document.getElementById(obj);
//alert(obj);
this.a = 0;
this.b = 0;
var that = this;
this.drag.onmousedown = function(event){
that.mousedown(event);
}
}
Drag.prototype.mousedown = function(event){
var event = event||window.event;
this.a = event.clientX-this.drag.offsetLeft;
this.b = event.clientY-this.drag.offsetTop;
var that = this;
document.onmousemove=function(event){
that.mousemove(event)
}
document.onmouseup=function(){
that.mouseup()
}
}
Drag.prototype.mousemove = function(event){
var event = event||window.event;
var x = event.clientX – this.a;
var y = event.clientY – this.b;
this.drag.style.left = x + “px”;
this.drag.style.top = y + “px”;
}
Drag.prototype.mouseup=function(){
document.onmousemove = null;
document.onmouseup = null;
}
new Drag(“drag”);
</script>
</body>
</html>

被拖拽元素地方的改变,left值的更改莫过于正是鼠标地点水平方向的变化值,e.clientX

2 clientX、clientY属性
这两个属性的种类都以Integer,单位是像素,可读可写。分别表示相关事件发生时,鼠标在浏览器的客户端区域(不包涵工具栏、滚动条等)的x坐标和y坐标。用一张图纸来疏解就再好然则了,请看:
图片 12

复制代码 代码如下:

在moMove中加进了e.which决断,e.which ==1
代表鼠标左键按下,那是为了消除,鼠标移除可拖拽范围外,再移回时,不需求按下左键,被拖拽成分就能够随之动的Bug。

图3.1:clientX和clientY属性

假定您要求对body定位,不过又供给安装其父成分的position为非static,那么你能够对本插件进行扩充。