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

然后我访问到了 发出来就可以粘贴复制自己做成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. 使用pug(jade),以及在vue+webpack中使用pug(jade)

    一:在HTML中使用pug 在css中有预处理器less和scss来使我们的样式表更加的简介,那么在HTML中有没有这样的格式呢,答案是有的,那就是pug(前身是jade),效果如下: 转译以后 好, ...

  2. IOS开发学习笔记039-autolayout 代码实现

    本文转载至 http://www.cnblogs.com/songliquan/p/4548206.html 1.代码实现比较复杂 代码实现Autolayout的步骤 利用NSLayoutConstr ...

  3. Oracle正式发布VirtualBox 5.0.22版本

    甲骨文(Oracle)正式发布了VirtualBox 5.0.22版本,该开源和跨平台虚拟化软件的最新维护版本已经面向所有支持平台开放,引入了诸多新特性和功能改善推荐用户尽早完成升级.新版本在Linu ...

  4. Http协议原理解析第一篇

    一:http的由来: OSI模型把网络通信分成七层:物理层.数据链路层.网络层.传输层.会话层.表示层和应用层,对于开发网络应用人员来说,一般把网络分成五层,这样比较容易理解.这五层为:物理层.数据链 ...

  5. Android FragmentActivity 给Fragment传值

    1.Fragment给Activity传值 定义一个在fragment 中 定义interface 监听器,让activity实现,并将activity的引用传递给fragment.即setListe ...

  6. 电力项目十四--js添加highslider特效

    当页面的一个table表格无法显示所有的内容的时候,点击[查看详细信息],显示详细内容: 下载css,js 1.在actingIndex.jsp中添加:引入js和css: <LINK href= ...

  7. SSH电力项目一 搭建Hibernate框架

    Hibernate所需要的基本文件: ElectText.java ElecText.hbm.xml hibernate.cfg.xml 第一步:创建测试表Elec_Text: create tabl ...

  8. js如何判断Object是否为空?(属性是否为空)

    js 判断一个 object 对象是否为空 转载原文 判断一个对象是否为空对象,本文给出三种判断方法: 1.最常见的思路,for...in... 遍历属性,为真则为“非空数组”:否则为“空数组” fo ...

  9. VMware虚拟机下安装CentOS7.0超详细图文教程

    1.本文说明: 官方的第一个文本档案.也就是0_README.txt,大概意思是这样(渣翻译,但是大概意思还是有的). CentOS-7.0-1406-x86_64-DVD.iso:这个镜像(DVD ...

  10. python--生成测试数据

    1.方法 import datetime params_dict_data = { "system_id":"systemId001", "order ...