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

然后我访问到了 发出来就可以粘贴复制自己做成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. 简易博客开发（8）----django1.9 博客部署到pythonanywhere上

    准备工作 首先需要注册一下,pythonanywhere的免费账户有一定的限制,只能创建一个web app,不能绑定独立域名,不能通过ssh连接,不过只是搭一个project也是够用了. 注册成功之后 ...

  2. 编程之美 set 2 精确表达浮点数

    有限小数和无限循环小数转化成分数 比如 0.9 ->  9/10 0.333(3) -> 1/3 解法 1. 主要涉及到一个数学公式的计算. 2. 对于有限小数, 分子分母求最大公约数即可 ...

  3. C static 关键字理解

    今天来看一下这么一个程序. #include<stdio.h> int count =1; int fun(void) { static int count =10; return cou ...

  4. Hadoop1.2.1 的 “Hello world！”

    下图是大概步骤: 下面是详细步骤,但我的代码跟上面有点不一样,但都是一个道理: 第一个程序测试 wordcount 先创建目录 hadoop fs -mkdir /wc hadoop fs -mkdi ...

  5. TArray<uint8>转FString

    void ARamaUDPReceiver::Recv(const FArrayReaderPtr& ArrayReaderPtr, const FIPv4Endpoint& EndP ...

  6. 将UIView转成UIImage,将UIImage转成PNG/JPG

    分类: UIImageView2013-03-12 17:37 350人阅读 评论(0) 收藏 举报 //UIView -> UIImage #import “QuartzCore/Quartz ...

  7. Android之dip、dp、px、sp和屏幕密度

    1. dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这 这个,不依 ...

  8. css位置相关元素

    1.border     是边框的意思,它可以设置粗细,多少像素,输入样式,solid是实线的意思,可以直接选择color边框的颜色. 也可以设置某个方向的边框,例如 设置一个div,让它的高和宽都为 ...

  9. jquery remove() detach() empty()三种方法的区别

    remove方法把事件删除掉了,数据并没有删除 detach方法保存了事件和数据 empty方法保留了元素本身,移除子节点,删除内容 举例: <!DOCTYPE html><html ...

  10. 第九课——redis集群

    第九课时作业 静哥 by 2016.4.18~2016.4.25 1.节点 (1)节点概念:一个节点就是redis集群里的一台redis服务器.一个redis集群是由多个节点(node)组成,最初每个 ...