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

然后我访问到了 发出来就可以粘贴复制自己做成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. hdu 2918(IDA*)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2918 思路:这道题与前面几道类似,可以说是被秒杀了!!!构造启发式函数h()=(cnt+3)/4(cn ...

  2. springmvc 发送PUT 和 DELETE 请求

    一: 发送 DELETE 或者 PUT 请求: 1.在表单中加入一个隐藏的参数: _method  , 值是 DELETE (或者PUT) <form action="springmv ...

  3. Linq循环DataTable,使用匿名对象取出需要的列

    var g_id = context.Request["g_id"]; DataTable dt = new DataTable(); var sql = @"selec ...

  4. 工作流JBPM_day01：1-说明_MyProcessDesigner_流程设计器

    工作流JBPM_day01:1-说明 先只做请假功能,怎么做? (请假可以和考勤整合到一起) 1,银行(拿号---叫号---办理) 2,餐馆(点菜---上菜---结账) 3,网购(下订单--配送--收 ...

  5. Java实现简单的文件复制

    public class FileCopy { public static void main(String[] args) { String path = "d:\\1.txt" ...

  6. Spring源码从开始到放弃(一)

    参考<Spring技术内幕>分析. github上面有spring的源码(https://github.com/spring-projects/spring-framework) spri ...

  7. 动态规划——最长公共上升子序列LCIS

    问题 给定两个序列A和B,序列的子序列是指按照索引逐渐增加的顺序,从原序列中取出若干个数形成的一个子集,若子序列的数值大小是逐渐递增的则为上升子序列,若A和B取出的两个子序列A1和B1是相同的,则A1 ...

  8. nginx于tomcat项目整合（拆分静态文件）

    1.在很多时候我们在网站上应用的时候都会用到nginx,由于我们是java开发者,不可避免的是我们需要在我们的tomcat的工程中应用到nginx,这里的应用可以是请求转发,负载均衡,反向代理,配置虚 ...

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

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

  10. Storm-源码分析-Topology Submit-Task-TopologyContext (backtype.storm.task)

    1. GeneralTopologyContext 记录了Topology的基本信息, 包含StormTopology, StormConf 已经从他们推导出的, task和component, co ...