使用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 相关文章推荐
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 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
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
JavaScript 函数replace深入了解
2013/03/14 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Django入门使用示例
2017/12/12 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
导游个人求职信
2014/04/25 职场文书
农行心得体会
2014/09/02 职场文书
同学聚会邀请函
2015/01/30 职场文书
学生个人总结范文
2015/02/15 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
我的收音机情缘
2022/04/05 无线电
使用Apache Camel表达REST服务的方法
2022/06/10 Servers