使用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实现给图片加链接
Aug 15 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
今天,小程序正式支持 SVG
Apr 20 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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
JavaScript中的闭包
2016/02/24 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
js实现消息滚动效果
2017/01/18 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
python中解析json格式文件的方法示例
2017/05/03 Python
Python实现的knn算法示例
2018/06/14 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
会议邀请书范文
2014/02/02 职场文书
交通安全教育制度
2014/02/02 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
实习指导教师评语
2014/12/30 职场文书
毕业设计论文评语
2014/12/31 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
阿里云日志过滤器配置日志服务
2022/04/09 Servers
python处理json数据文件
2022/04/11 Python
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技