使用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 function、指针及内置对象
Feb 19 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
Html5生成验证码的示例代码
May 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
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
JS高级笔记
2011/07/13 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
对vux点击事件的优化详解
2018/08/28 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
python 基于opencv操作摄像头
2020/12/24 Python
python解包用法详解
2021/02/17 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
电子商务专员岗位职责
2013/12/11 职场文书
招聘专员岗位职责
2014/03/07 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
Python中rapidjson参数校验实现
2021/07/25 Python
php去除数组中为0的元素的实例分析
2021/11/17 PHP