一个来自网上的东西- -被我捡到了

然后我访问到了 发出来就可以粘贴复制自己做成js文件了吧

// by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/

// zxx.drag v1.0 2010-03-23 元素的拖拽实现

var params = {

    left: ,

    top: ,

    currentX: ,

    currentY: ,

    flag: false

};

//获取相关CSS属性

var getCss = function(o,key){

    return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];

};

//拖拽的实现

var startDrag = function(bar, target, callback){

    if(getCss(target, "left") !== "auto"){

        params.left = getCss(target, "left");

    }

    if(getCss(target, "top") !== "auto"){

        params.top = getCss(target, "top");

    }

    //o是移动对象

    bar.onmousedown = function(event){

        params.flag = true;

        if(!event){

            event = window.event;

            //防止IE文字选中

            bar.onselectstart = function(){

                return false;

            }

        }

        var e = event;

        params.currentX = e.clientX;

        params.currentY = e.clientY;

    };

    document.onmouseup = function(){

        params.flag = false;

        if(getCss(target, "left") !== "auto"){

            params.left = getCss(target, "left");

        }

        if(getCss(target, "top") !== "auto"){

            params.top = getCss(target, "top");

        }

    };

    document.onmousemove = function(event){

        var e = event ? event: window.event;

        if(params.flag){

            var nowX = e.clientX, nowY = e.clientY;

            var disX = nowX - params.currentX, disY = nowY - params.currentY;

            target.style.left = parseInt(params.left) + disX + "px";

            target.style.top = parseInt(params.top) + disY + "px";

        }

        if (typeof callback == "function") {

            callback(parseInt(params.left) + disX, parseInt(params.top) + disY);

        }

    }

};

上面那个是js的文件！！！！接下来才是界面代码。。。。

<!DOCTYPE HTML>

<html>

<head>

 <title>HTML5实现拖拽操作</title>

 <meta charset="utf-8"/>

 <style type="text/css">

#box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #; -webkit-box-shadow:2px 2px 4px #;}

#main{border:1px solid #a0b3d6; background:white;}

#bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}

#content{width:420px; height:250px; padding:10px 5px;}

</style>

</head>

<body>

 <div id="box">

    <div id="main">

        <div id="bar">拖拽</div>

        <div id="content">

            内容……

        </div>

    </div>

</div>

</body>

</html>

<script src="http://www.zhangxinxu.com/study/js/zxx.drag.1.0.js" type="text/javascript"></script>

<script type="text/javascript">

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

    var oBar = document.getElementById("bar");

    startDrag(oBar, oBox);

</script>

界面端有个引用的网络js名字。。。。也可以直接用。。。。。

http://www.cnblogs.com/baimangguo/p/6609795.html

【转】网页窗口DIV自定义拖动的更多相关文章

  1. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  2. vue自定义拖动指令

    1.在项目开发中,需要对div进行拖动.因为需要自定义组件 a>定义全局拖拽指令: 定义全局指令,需要在main.js中写入vue.directive('drag',{});即可.但是一般会在外 ...

  3. css3-11 网页如何使用自定义字体

    css3-11 网页如何使用自定义字体 一.总结 一句话总结:下载好字体文件,然后在网页中引入,用src: url('my.otf');来引入,使用的时候就使用自己定义的名字来使用这个字体. 1.网页 ...

  4. 【转】C# 控件的自定义拖动、改变大小方法

    在用VS的窗体设计器时,我们可以发现控件都是可以拖动的,并且还可以调整大小.怎么在自己的程序中可以使用上述功能呢? 下面的方法值得借鉴! using System; using System.Wind ...

  5. jquery实现DIV层拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  7. VC-基础-WebBrowser控件中弹出新网页窗口

    用webbrowser控件浏览网页时,常弹出新的网页窗口,若不做任何控制的话,会在默认浏览器(一般是IE)中打开,这样就在新的窗口打开了,原程序就很难控制了,且存在webbrowser控件和IE的se ...

  8. 纯js实现积木（div）拖动效果

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

  9. 转载 * jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

随机推荐

  1. windows 系统重装之后怎么恢复oracle数据库

    今天单位的服务器系统进不去了,重做了系统,有重要的oracle数据,经理让我恢复一下oracle数据,试着尝试了一下 1.首先,将原来的ORACLE文件夹改名,原来的路径是D:/oracle.我暂时改 ...

  2. 分页技巧_改进JSP页面中的公共分页代码_实现分页时可以有自定义的过滤与排序条件

    分页技巧__改进JSP页面中的公共分页代码 自定义过滤条件问题 只有一个url地址不一样写了很多行代码 public>>pageView.jspf添加 分页技巧__实现分页时可以有自定义的 ...

  3. Spring_day04--课程安排_回顾SSH框架知识点_SSH框架整合思想

    Spring_day04 上节内容回顾 今天内容介绍 回顾SSH框架知识点 Hibernate框架 Struts2框架 Spring框架 SSH框架整合思想 整合struts2和spring框架 Sp ...

  4. webpack 报错 path is not defind

    webpack.config.js里的内容是这样的,注意标红的地方: 首先,绝对路径'./dist'是 没有问题的 那么,查了很多,最后看到别人的webpack.config.js里面这样写着,现在c ...

  5. gulp 报错'wacth' errord

    gulp.wacth(...).watch is not a function 如图: 检查了gulpfile.js文件中的wacth事件:发现这样的写法出错: gulp.task('watch', ...

  6. LeetCode 笔记系列16.2 Minimum Window Substring [从O(N*M)， O(NlogM)到O(N)，人生就是一场不停的战斗]

    题目:Given a string S and a string T, find the minimum window in S which will contain all the characte ...

  7. 170331、58到家MQ如何快速实现流量削峰填谷

    问:为什么会有本文? 答:上一篇文章<到底什么时候该使用MQ?>引起了广泛的讨论,有朋友回复说,MQ的还有一个典型应用场景是缓冲流量,削峰填谷,本文将简单介绍下,MQ要实现什么细节,才能缓 ...

  8. Python全栈day14（集合）

    一,集合 1,集合由不同元素组成 2,无序 3,集合中元素必须是不可变类型 二,定义集合 1,s = {1,2,3,4,5} 2,s = set(hello)以迭代的方式生成集合 s = set(&q ...

  9. 1.1 VGA（图像显示卡），Graphics Card（图形加速卡），Video Card（视频加速卡），3D Accelerator Card 和 GPU（图形处理器）

    1.1 VGA(图像显示卡),Graphics Card(图形加速卡),Video Card(视频加速卡),3D Accelerator Card 和 GPU(图形处理器) 对这些概念之前也没怎么了解 ...

  10. Windows系统优化

    1.关闭家庭组,因为这功能会导致硬盘和CPU处于高负荷状态: 关闭方法:windows + R 打开运行,输入services.msc回车,右侧窗格找到“HomeGroup Listener”和“Ho ...