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


Posted in Javascript onMarch 18, 2015

前端开发的时候,有好多地方用到拖拽效果,当然 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>

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

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

        }

效果如下:

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

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

Javascript 相关文章推荐
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
使用纯javascript实现放大镜效果
Mar 18 #Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 #Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 #Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 #Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 #Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 #Javascript
jQuery统计指定子元素数量的方法
Mar 17 #Javascript
You might like
PHP 八种基本的数据类型小结
2011/06/01 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
Three.js基础部分学习
2017/01/08 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python reduce()函数的用法小结
2017/11/15 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
方正Java笔试题
2014/07/03 面试题
最新计算机专业自荐信
2013/10/16 职场文书
大学军训感言
2014/01/10 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
建国大业观后感800字
2015/06/01 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记