<!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="Content-Type" content="text/html; charset=utf-8" />

<title>js div浮动层拖拽效果代码 - 站长素材</title>

<style type="text/css">

div,h2,p{margin:0;padding:0;}

body{font:14px/1.5 arial;}

#box{width:400px;height:200px;background:#fef4eb;padding:5px;margin:50px;border:1px solid #f60;}

#box .title{height:25px;background:#f60;}

#tool{margin-bottom:10px;}

</style>

<script type="text/javascript">

function Drag()

{

    //初始化

    this.initialize.apply(this, arguments)

}

Drag.prototype = {

    //初始化

    initialize : function (drag, options)

    {

        this.drag = this.$(drag);

        this._x = this._y = 0;

        this._moveDrag = this.bind(this, this.moveDrag);

        this._stopDrag = this.bind(this, this.stopDrag);

        this.setOptions(options);

        this.handle = this.$(this.options.handle);

        this.maxContainer = this.$(this.options.maxContainer);

        this.maxTop = Math.max(this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offsetHeight;

        this.maxLeft = Math.max(this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth;

        this.limit = this.options.limit;

        this.lockX = this.options.lockX;

        this.lockY = this.options.lockY;

        this.lock = this.options.lock;

        this.onStart = this.options.onStart;

        this.onMove = this.options.onMove;

        this.onStop = this.options.onStop;

        this.handle.style.cursor = "move";

        this.changeLayout();

        this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag))

    },

    changeLayout : function ()

    {

        this.drag.style.top = this.drag.offsetTop + "px";

        this.drag.style.left = this.drag.offsetLeft + "px";

        this.drag.style.position = "absolute";

        this.drag.style.margin = "0"

    },

    startDrag : function (event)

    {

        var event = event || window.event;

        this._x = event.clientX - this.drag.offsetLeft;

        this._y = event.clientY - this.drag.offsetTop;

        this.addHandler(document, "mousemove", this._moveDrag);

        this.addHandler(document, "mouseup", this._stopDrag);

        event.preventDefault && event.preventDefault();

        this.handle.setCapture && this.handle.setCapture();

        this.onStart()

    },

    moveDrag : function (event)

    {

        var event = event || window.event;

        var iTop = event.clientY - this._y;

        var iLeft = event.clientX - this._x;

        if (this.lock) return;

        this.limit && (iTop < 0 && (iTop = 0), iLeft < 0 && (iLeft = 0), iTop > this.maxTop && (iTop = this.maxTop), iLeft > this.maxLeft && (iLeft = this.maxLeft));

        this.lockY || (this.drag.style.top = iTop + "px");

        this.lockX || (this.drag.style.left = iLeft + "px");

        event.preventDefault && event.preventDefault();

        this.onMove()

    },

    stopDrag : function ()

    {

        this.removeHandler(document, "mousemove", this._moveDrag);

        this.removeHandler(document, "mouseup", this._stopDrag);

        this.handle.releaseCapture && this.handle.releaseCapture();

        this.onStop()

    },

    //参数设置

    setOptions : function (options)

    {

        this.options =

        {

            handle:            this.drag, //事件对象

            limit:            true, //锁定范围

            lock:            false, //锁定位置

            lockX:            false, //锁定水平位置

            lockY:            false, //锁定垂直位置

            maxContainer:    document.documentElement || document.body, //指定限制容器

            onStart:        function () {}, //开始时回调函数

            onMove:            function () {}, //拖拽时回调函数

            onStop:            function () {}  //停止时回调函数

        };

        for (var p in options) this.options[p] = options[p]

    },

    //获取id

    $ : function (id)

    {

        return typeof id === "string" ? document.getElementById(id) : id

    },

    //添加绑定事件

    addHandler : function (oElement, sEventType, fnHandler)

    {

        return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)

    },

    //删除绑定事件

    removeHandler : function (oElement, sEventType, fnHandler)

    {

        return oElement.removeEventListener ? oElement.removeEventListener(sEventType, fnHandler, false) : oElement.detachEvent("on" + sEventType, fnHandler)

    },

    //绑定事件到对象

    bind : function (object, fnHandler)

    {

        return function ()

        {

            return fnHandler.apply(object, arguments)

        }

    }

};

//应用

window.onload = function ()

{

    var oBox = document.getElementById("box");

    var oTitle = oBox.getElementsByTagName("h2")[0];

    var oSpan = document.getElementsByTagName("span")[0];

    var oDrag = new Drag(oBox, {handle:oTitle, limit:false});

    var aInput = document.getElementsByTagName("input");

    //锁定范围接口

    aInput[0].onclick = function ()

    {

        oDrag.limit = !oDrag.limit;

        this.value = oDrag.limit ? "取消锁定范围" : "锁定范围"

    };

    //水平锁定接口

    aInput[1].onclick = function ()

    {

        oDrag.lockX = !oDrag.lockX;

        this.value = oDrag.lockX ? "取消水平锁定" : "水平锁定"

    };

    //垂直锁定接口

    aInput[2].onclick = function ()

    {

        oDrag.lockY = !oDrag.lockY;

        this.value = oDrag.lockY ? "取消垂直锁定" : "垂直锁定"

    };

    //锁定位置接口

    aInput[3].onclick = function ()

    {

        oDrag.lock = !oDrag.lock;

        this.value = oDrag.lock ? "取消锁定位置" : "锁定位置"

    };

    //开始拖拽时方法

    oDrag.onStart = function ()

    {

        oSpan.innerHTML = "开始拖拽"

    };

    //开始拖拽时方法

    oDrag.onMove = function ()

    {

        oSpan.innerHTML = "left:" + this.drag.offsetLeft + ", top:" + this.drag.offsetTop

    };

    //开始拖拽时方法

    oDrag.onStop = function ()

    {

        oSpan.innerHTML = "结束拖拽"

    };

};

</script>

</head>

<body>

<br /><br /><br /><br /><br />

<center>

<div id="tool">

    <input type="button" value="锁定范围" />

    <input type="button" value="水平锁定" />

    <input type="button" value="垂直锁定" />

    <input type="button" value="锁定位置" />

</div>

<p>拖放状态：<span>未开始</span></p>

<div id="box">

    <h2 class="title"></h2>

</div>

</center>

</body>

</html>

js div浮动层拖拽效果代码的更多相关文章

  1. 【j2ee】div浮动层拖拽

    背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽 解决步骤:1.浮动层实现  2.拖拽实现 多方查资料,基本实现功能,现做demo,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...

  2. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  3. 原生js实现模块来回拖拽效果

    代码比较冗余,还没来得及做整理,往见谅. 主要用到的 JS 事件有: onmousedown:鼠标点下事件 onmousemove:鼠标移动事件 onmouseup:鼠标放开事件 具体代码如下: &l ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  6. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  7. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  8. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS实现拖拽效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. POJ 1088滑雪

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 89168   Accepted: 33474 Description ...

  2. C# 通过消息捕获处理窗体最大化/最小化

    通过以下的一些代码可以实现捕获相关的一些消息事件; 以及可以通过调用 SetCloseMenu();实现关闭一些按钮功能如屏蔽关闭按钮功能等; 需要添加命名空间:using System.Runtim ...

  3. 可以ping通的打印机，没有办法打印

    可以ping通打印机的电脑,但是访问不了打印机的共享设置.\\XXX.XXX.XXX.XXX  之后出现如下错误: 您可能没有权限使用网络资源.请与这台服务器的管理员联系以查明您是否有访问权限.目前没 ...

  4. 结合C++和GDAL实现shapefile（shp)文件的读取

    工具:vs2012+GDAL 2.0 数据:中国省界SHP文件bou2_4p.shp   可点击下载 包含头文件: #include "ogrsf_frmts.h" 代码: int ...

  5. Linux基础入门

    第一节,linux系统简介 一.实验内容 了解 Linux 的历史,Linux 与 Windows 的区别等入门知识. 二.实验要求 阅读linux简介与历史 三.实验步骤 (一).Linux 为何物 ...

  6. 信息安全系统设计基础实验四：外设驱动程序设计 20135211李行之&20135216刘蔚然

    北京电子科技学院(BESTI) 实 验 报 告 封面 课程:信息安全系统设计基础                                           班级:1352           ...

  7. 20145222黄亚奇《Java程序设计》第5周学习总结

    教材学习内容总结 Java中所有错误都会被打包为对象,运用try.catch,可以在错误发生时显示友好的错误信息. 运用try.catch,还可以在捕捉处理错误之后,尝试恢复程序正常执行流程.如: i ...

  8. html5新增选择器

    分享点html5的学习笔记,比较基础,突然发现通过写博客来记笔记有很多优点呢,平常记得笔记比较简单,复习起来比较吃力,看自己的博客理解起来还比较轻松,而且只有真正理解了才能表达清楚让别人看懂,还锻炼语 ...

  9. [30分钟]MSSQL快速入门教程

    1.什么是SQL语句 sql语言:结构化的查询语言.(Structured Query Language),是关系数据库管理系统的标准语言. 它是一种解释语言:写一句执行一句,不需要整体编译执行.语法 ...

  10. webstorm调试Node的时候配置

    点击Edit Configurations的这个的配置:(不能点击是因为目前你选中的不是项目)