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

然后我访问到了 发出来就可以粘贴复制自己做成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. InstallShield Build Error -1014: Cannot rename directory <PATH> to <PATH>\folder.Bak.

    InstallSheild执行Build结果错误: 错误详细信息: Cannot rename directory <PATH> to <PATH>\folder.Bak. W ...

  2. Sokect异步连接发送

    客户端 static void Main(string[] args) { Console.WriteLine("this is a Client!"); Socket clien ...

  3. Shell脚本编程与文件系统修复

    导读 Linux基金会发起了LFCS认证(Linux 基金会认证系统管理员)Linux Foundation Certified Sysadmin,这是一个全新的认证体系,旨在让世界各地的人能够参与到 ...

  4. js 中的变量声明提前总结

    一.var 声明 ES6之前,js 中声明变量基本上用 var 关键字: 1.如果访问未声明的变量,会报错:ReferenceError 2.声明了未赋值,值为 undefined,跟前面的报错是两回 ...

  5. 160505、oracle 修改字符集 修改为ZHS16GBK

    修改oracle字符集 方法/步骤   oracle数据库的字符集更改 A.oracle server 端 字符集查询 select userenv('language') from dual 其中N ...

  6. HDU 5701 中位数计数 百度之星初赛

    中位数计数 Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Sub ...

  7. Spoken English Practice (yesterday) （Look， I just wanted to apologize again for yesterday? It's fine, I know you didn't mean it. / when I say it, I mean it.）

    绿色:连读:                  红色:略读:               蓝色:浊化:               橙色:弱读     下划线_为浊化 口语蜕变(2017/7/12) ...

  8. xcode6 下载

    百度云下载 http://pan.baidu.com/s/1qWpuIC0提取码:ip9o 苹果下载: http://adcdownload.apple.com//wwdc_2014/xcode_6_ ...

  9. 微信公众号获取用户openId How to use cURL to get jSON data and decode the data?

    w http://stackoverflow.com/questions/16700960/how-to-use-curl-to-get-json-data-and-decode-the-data

  10. puppeteer部署到centOS上出现launch chrome fail的情况

    在Mac上调试无问题,放到阿里云上运行会报错. 需要先安装依赖, yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 lib ...