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

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

赞 (0)

相关推荐

  • Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    在阅读本文之前,请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性,因为循序渐进是一个很好的习惯,值得提倡.好了,看看我们今天的内容吧. 首先让我们先看一看element.offsetLeft属性. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ 定义:返回一个像素数值,它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量.

  • javascript支持firefox,ie7页面布局拖拽效果代码

    javascript 拖拽JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖 动 拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm加强版效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag2.htm拖拽原理: 关于拖拽的基础,可以参考这篇文章,讲得非常不错. 其实原理很简单,就是

  • javascript拖拽上传类库DropzoneJS使用方法

    用法 1. add js and css style 复制代码 代码如下: <link href="~/Dropzone/css/basic.css" rel="stylesheet" /> <link href="~/Dropzone/css/dropzone.css" rel="stylesheet" /> <script src="~/Dropzone/dropzone.min.j

  • js实现QQ面板拖拽效果（慕课网DOM事件探秘）（全）

    js实现QQ面板拖拽效果（慕课网DOM事件探秘）（全）

    QQ面板拖拽,效果如图 JavaScript代码如下: function getByClass(clsName, parent) { var oParent = parent ? document.getElementById(parent) : document, eles = [], elements = oParent.getElementsByTagName('*'); for (var i = 0, l = elements.length; i < l; i++) { if (elem

  • 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    我们之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进.先看下效果图: 原有百度的Popup.js在有 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

  • javascript实现移动端上的触屏拖拽功能

    javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

  • js实现拖拽效果

    首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20

  • 关于js拖拽上传 [一个拖拽上传修改头像的流程]

    关于js拖拽上传 [一个拖拽上传修改头像的流程]

    如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其中的要点和实践体会做一点总结. 先看一下总体视图:1. 文件拖拽接受区域要有明显的标示,并且要尽可能的大(由于版面的原因,这个界面的拖放盒子并不大).可以用虚线框盒子等样式吸引用户拖拽文件.最好有明显的文字提示和图标配合. 2. 在交互体验上当文件拖入浏览器窗口时,可以用拖放区变换背景颜色等向用户发起放置操作邀请. 实现代码: 复制代码 代码如下: doc.bind({ 'drage

  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

  • js完美的div拖拽实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

随机推荐