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

 更新时间:2015年03月18日 09:48:42   投稿:hebedich  
本文给大家分享的是使用纯JS实现的简单的拖拽效果的插件,算是对自己javascript学习的一个小的检验,如果小伙伴们需要复杂的拖拽效果,还是考虑jQuery的draggable吧,更成熟一些。

前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,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>

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 {
            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");
        }

效果如下:

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

相关文章

  • js 实现菜单上下显示附效果图

    js 实现菜单上下显示附效果图

    菜单上下显示的实现方法有很多,在本文将为大家介绍下使用js是如何实现的,需要的朋友不要错过
    2013-11-11
  • js实现倒计时关键代码

    js实现倒计时关键代码

    这篇文章主要为大家详细介绍了js实现倒计时的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 基于JS实现简单的样式切换效果代码

    基于JS实现简单的样式切换效果代码

    这篇文章主要介绍了基于JS实现简单的样式切换效果代码,涉及简单的javascript控制页面元素样式变换的技巧,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • 纯js实现html转pdf的简单实例(推荐)

    纯js实现html转pdf的简单实例(推荐)

    下面小编就为大家带来一篇纯js实现html转pdf的简单实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • vue+ts下对axios的封装实现

    vue+ts下对axios的封装实现

    这篇文章主要介绍了vue+ts下对axios的封装实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 详解Bootstrap各式各样的按钮(推荐)

    详解Bootstrap各式各样的按钮(推荐)

    Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便
    2016-12-12
  • Javascript循环绑定事件的示例代码

    Javascript循环绑定事件的示例代码

    我们先看一个关于Javascript利用循环绑定事件的例子
    2008-10-10
  • javascript实现炫酷的拖动分页

    javascript实现炫酷的拖动分页

    非常酷的javascript拖动分页功能,无缝循环分页,拖动鼠标即可完成分页,鼠标向左拖动回到前一页,向右拖动则翻开第二页,还带有动画特效,着实很不错,界面黑色,非主流风格,相信很多人会喜欢的。
    2015-05-05
  • JS实现CheckBox复选框全选全不选功能

    JS实现CheckBox复选框全选全不选功能

    在网站的管理后台应用此功能居多,如一次性处理多个产品,或对文章的删除对产品的下架等处理,一条一条的点显然有一些麻烦,如果能每一行放一个checkbox,然后统一处理就好办的多了,今天我就用简单的篇幅来讲解一下这个功能的实现原理和实现过程。
    2015-05-05
  • 利用webpack理解CommonJS和ES Modules的差异区别

    利用webpack理解CommonJS和ES Modules的差异区别

    这篇文章主要介绍了利用webpack理解CommonJS和ES Modules的差异区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论