当前位置: 澳门新濠3559 > 服务器运维 > 正文

JS代码需要常写

时间:2019-12-08 19:30来源:服务器运维
在使用时,先引入拖拽插件的js文件。 复制代码 代码如下: 使用js实现的简单拖拽效果,js实现拖拽 前端开发的时候,有好多地方用到拖拽效果,当然  是个不错的选择,but我是个打破砂锅

在使用时,先引入拖拽插件的js文件。

复制代码 代码如下:

使用js实现的简单拖拽效果,js实现拖拽

前端开发的时候,有好多地方用到拖拽效果,当然   是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说。

 first: html和css

复制代码 代码如下:
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            position: absolute;
            width: 100px;
            height: 100px;
            cursor: move;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

澳门新濠3559 1

now,先把主要算法实现一下:

复制代码 代码如下:
 <script>
        window.onload = function () {
            //获取需要拖拽的div
            var div1 = document.getElementById("div1");
            //添加鼠标按下事件
            div1.onmousedown = function (evt) {
                var oEvent = evt || event;
                //获取按下鼠标到div left  top的距离
                var distanceX = oEvent.clientX - div1.offsetLeft;
                var distanceY = oEvent.clientX - div1.offsetTop;
                //添加doc滑动时间
                document.onmousemove = function (evt) {
                    var oEvent = evt || event;
                    //重新计算div的left top值
                    var left = oEvent.clientX - distanceX;
                    var top = oEvent.clientY - distanceY;
                    //left  当小于等于零时,设置为零 防止div拖出document之外
                    if (left <= 0) {
                        left = 0;
                    }
                    //当left 超过文档右边界  设置为右边界
                    else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {
                        left = document.documentElement.clientWidth - div1.offsetWidth;
                    }
                    if (top <= 0) {
                        top = 0;
                    }
                    else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {
                        top = document.documentElement.clientHeight - div1.offsetHeight;
                    }
                    //重新给div赋值
                    div1.style.top = top + "px";
                    div1.style.left = left + "px";
                }
                //添加鼠标抬起事件
                div1.onmouseup = function () {
                    //清空事件
                    document.onmousemove = null;
                    div1.onmouseup = null;
                }
            }
        }
    </script>

yeah,使用面向对象实现一下

复制代码 代码如下:
<style>
        * {
            margin:0;
            padding:0;
        }
        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #div2 {
JS代码需要常写。            background-color:yellow;
            width:100px;
            height:100px;
        }
    </style>
<div id="div1"></div>
<div id="div2"></div>

js Draggle class:

复制代码 代码如下:
 function Drag(id) {
            this.div = document.getElementById(id);
            if (this.div) {
                this.div.style.cursor = "move";
                this.div.style.position = "absolute";
            }
            this.disX = 0;
            this.disY = 0;
            var _this = this;
            this.div.onmousedown = function (evt) {
                _this.getDistance(evt);
                document.onmousemove = function (evt) {
                    _this.setPosition(evt);
                }
                _this.div.onmouseup = function () {
                    _this.clearEvent();
                }
            }
        }
        Drag.prototype.getDistance = function (evt) {
            var oEvent = evt || event;
            this.disX = oEvent.clientX - this.div.offsetLeft;
            this.disY = oEvent.clientY - this.div.offsetTop;
        }
        Drag.prototype.setPosition = function (evt) {
            var oEvent = evt || event;
            var l = oEvent.clientX - this.disX;
            var t = oEvent.clientY - this.disY;
            if (l <= 0) {
                l = 0;
            }
            else if (l >= document.documentElement.clientWidth - this.div.offsetWidth) {
                l = document.documentElement.clientWidth - this.div.offsetWidth;
            }
            if (t <= 0) {
                t = 0;
            }
            else if (t >= document.documentElement.clientHeight - this.div.offsetHeight) {
                t = document.documentElement.clientHeight - this.div.offsetHeight;
            }
            this.div.style.left = l + "px";
            this.div.style.top = t + "px";
        }
        Drag.prototype.clearEvent = function () {
            this.div.onmouseup = null;
            document.onmousemove = null;
        }

at last:最终实现:

复制代码 代码如下:
  window.onload = function () {
            new Drag("div1");
            new Drag("div2");
        }

效果如下:

澳门新濠3559 2

以上所述就是本文的全部内容了,希望能对大家更加熟练的掌握javascript有所帮助。

前端开发的时候,有好多地方用到拖拽效果,当然 是个不错的选择,but 我是个...

如果传递父元素,请别忘了将父元素的定位设为position:relative或position:absolute。

后记:
在写的过程中非常需要注意的几点是:
1、拖动层的 position、left 和 top 必须写在 style 里
2、移动过程中设置 left 和 top 要带单位,否则不起作用
3、多级 div 嵌套时需要给父 div 加 over-flow:hidden 样式
完毕!

在使用时,被拖拽元素的id是必须参数,父元素的id为可选参数,如果不传递父元素的id,则默认使用documentElement为可拖拽的范围。

/*
*使用方法:
* var d = new Drag({id:'dragPannel',maxLeft:500,maxTop:200});
* d.ready();
*请注意:
* 拖动对象的left和top样式必须写在其style属性里边
*
*/
//矫正调用者。将 fn 作为 newObj 的方法调用
function repairCaller(newObj, fn){
return function(){
return fn.apply(newObj, arguments);
}
}
function Drag( config ){
this.moveTarget = T.dom.get( config.id );
this.startLeft = parseInt(this.moveTarget.style.left); //每次拖动开始时被拖动对象的 left,top
this.startTop = parseInt(this.moveTarget.style.top);
this.startClientX = this.startLeft; //保存拖动开始时事件的 clientX, clientY
this.startClientY = this.startTop;
this.MAX_LEFT = config.maxLeft||document.documentElement.clientWidth - this.moveTarget.offsetWidth; //元素可以移动的最大范围
this.MAX_TOP = config.maxTop||document.documentElement.clientHeight - this.moveTarget.offsetHeight;
this.lock = true;
}
Drag.prototype.ready = function(){
//绑定事件
T.bind(document, "mousedown", repairCaller(this,this.down));
T.bind(document, "mousemove", repairCaller(this,this.move));
T.bind(document, "mouseup", repairCaller(this,this.stop));
}
Drag.prototype.down = function(){
//取得事件对象
var event = T.event.getEvent(arguments[0]),
target = T.event.getTarget(event);
if (target == this.moveTarget){
this.lock = false;
//在事件开始时保存各种坐标位置
this.startLeft = parseInt(this.moveTarget.style.left);
this.startTop = parseInt(this.moveTarget.style.top);
this.startClientX = event.clientX;
this.startClientY = event.clientY;
}
};
Drag.prototype.move = function(){
if(!this.lock ){
//取得事件对象
var event = T.event.getEvent(arguments[0]),
target = T.event.getTarget(event);
if(target == this.moveTarget){
//如有选择内容,清除之
//window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//凑数拖动范围有没超过最大限制
var realLeft = this.startLeft + event.clientX - this.startClientX, //实际的移动范围
realTop = this.startTop + event.clientY - this.startClientY,
rightLeft , rightTop; //正确的 left, top 取值
rightLeft = realLeft > this.MAX_LEFT ? this.MAX_LEFT : ( realLeft > 0 ? realLeft : 0 );
rightTop = realTop > this.MAX_TOP ? this.MAX_TOP : ( realTop > 0 ? realTop : 0 );
this.moveTarget.style.left = rightLeft + "px";
this.moveTarget.style.top = rightTop + "px";
}
else{
this.lock = true;
}
}
};
Drag.prototype.stop = function(){
this.lock = true
};

被拖拽元素位置的变化,left值的变化其实就是鼠标位置水平方向的变化值,e.clientX

代码如下: /* *使用方法: *澳门新濠3559 , var d = new Drag({id:'dragPannel',maxLeft:500,maxTop:200}); * d.ready(); *请注意: * 拖动对象的left和top样式必须写在其...

希望本文对大家学习javascript程序设计有所帮助。

  Document  *{ 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; }         window.onload = function(){ var drag = new Drag({id: "drag", parentId: "content"}); drag.startDrag(); }

使用说明:

在moMove中增加了e.which判断,e.which ==1 表示鼠标左键按下,这是为了解决,鼠标移除可拖拽范围外,再移回时,无需按下左键,被拖拽元素就会跟着动的Bug。

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

首先,看一下拖拽的原理。

如果您想在整个窗口中拖拽,请不要设置被拖拽元素的父元素的定位,即,使其相对body定位。

如果您需要对body定位,但是又需要设置其父元素的position为非static,那么您可以对本插件进行扩展。

  • 鼠标左键按下时e.clientX。 top值的变化其实就是鼠标位置竖直方向的变化值,e.clientY - 鼠标左键按下时e.clientY。 另外就是设置拖拽的范围,上下左右不得超过父元素所在的区域。

    function Drag { this.moveTarget = document.getElementById; if{ this.targetParent = document.getElementById; 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{ if{ return element.currentStyle[attr]; }else{ return window.getComputedStyle.getPropertyValue } } Drag.prototype.moDown = function{ e = e || window.event; this.clientX = e.clientX; this.clientY = e.clientY; //鼠标按下时,drag的left值,top值 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 || window.event; if{ this.lock = true; } if{ 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 || window.event; this.lock = true; }; Drag.prototype.startDrag = function this.moveTarget.onmousedown = function}.bind; this.moveTarget.onmousemove = function}.bind; this.moveTarget.onmouseup = function}.bind; }

JS代码需要常写,不然容易生疏,最近虽然一直在看JS的原型,行为委托等知识点,但是动手写代码的量略有减少。本文与大家分享一个拖拽组件,供大家参考,具体内容如下

编辑:服务器运维 本文来源:JS代码需要常写

关键词: