鼠标事件：

键盘事件：

//通过class获取元素，封装一个通过class获取元素的方法

//IE10以下不支持document.getElementByClass()

function getByClass(className,parent){//必须的元素（前面），可选的元素

    var oParent=parent?document.getElementById(parent):document,//如果有父元素传递过来，不传递父元素对象，而是传父元素上的ID；如果没传父元素就用document

        eles=[],

        elements=oParent.getElementsByTagName('*');//获取所有元素

    for(var i=0,l=elements.length;i<l;i++){//遍历所有元素,可以同时初始化多个变量

        if(elements[i].className==className){//等于传过来的className

            eles.push(elements[i]);

        }

    }

    return eles;

}

window.onload=drag;

function drag(){

    var oTitle=getByClass('login_logo_webqq','loginPanel')[0];//数组中第一个元素;当前元素，父元素

    //拖曳的操作

    oTitle.onmousedown=fnDown;

    }

//鼠标事件都是在浏览器窗口中的特定位置上发生的。

//这个位置信息保存在事件的clientX和clientY属性中

//所有浏览器都支持这两个属性

//他们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。

function fnDown(event){

    var oDrag=document.getElementById('loginPanel');

    // document.onmousemove=function(event){//变量event接收事件对象

    //     event=event||window.event;//非IE 和IE浏览器对象不一样

    //     //document.title=event.clientX+','+event.clientY;

    //     oDrag.style.left=event.clientX+'px';

    //     oDrag.style.top=event.clientY+'px';

    //光标按下时光标和面板之间的距离

    disX=event.clientX-oDrag.offsetLeft,

    disY=event.clientY-oDrag.offsetTop;

    //移动

    document.onmousemove=function(event){

        event=event||window.event;

        fnMove(event,disX,disY);

    }

    //释放

    document.onmouseup=function(){

        document.onmousemove=null;

        document.onmouseup=null;

    }

}

function fnMove(e,posX,posY){

    var oDrag=document.getElementById('loginPanel');

    var l=e.clientX-posX,

        t=e.clientY-posY,

        winW=document.documentElement.clientWidth || document.body.clientWidth,

        winH=document.documentElement.clientHeight||document.body.clientHeight,

        maxW=winW-oDrag.offsetWidth,

        maxH=winH-oDrag.offsetHeight;

        if(l<0){

            l=0;

        }

        else if(l>maxW){

            l=maxW;

        }

        if(t<0){

            t=0;

        }else if(t>maxH){

            t=maxH;

        }

    oDrag.style.left=l+'px';

    oDrag.style.top=t+'px';

    document.title=l;

}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style>

        .login_logo_webqq{background-color: white; height: 8px; width: auto;}

        .loginPanel{position: absolute;width: 80px; height: 40px; background-color: blue; border:1px solid blue;border-radius: 5px;}

    </style>

    <script src="drag.js"></script>

</head>

<body>

    <div class='div'>

        <div class='loginPanel'  id='loginPanel'>

            <div class='login_logo_webqq'></div>

        </div>

    </div>

</body>

</html>

dom03的更多相关文章

  1. eCharts_基于eCharts开发的一个多图表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. poj 2001 Shortest Prefixes（特里）

    主题链接:http://poj.org/problem?id=2001 Description A prefix of a string is a substring starting at the ...

  2. poj2096--Collecting Bugs(可能性dp第二弹，需求预期)

    Collecting Bugs Time Limit: 10000MS   Memory Limit: 64000K Total Submissions: 2678   Accepted: 1302 ...

  3. 家庭洗车APP --- Androidclient开展 之 网络框架包介绍（一）

    家庭洗车APP --- Android客户端开发 之 网络框架包介绍(一) 上篇文章中给大家简单介绍了一些业务.上门洗车APP --- Android客户端开发 前言及业务简单介绍,本篇文章给大家介绍 ...

  4. URL压缩算法的短地址

    时下,短网址应用已经在全国各大微博上開始流行了起来.比如QQ微博的url.cn,新郎的t.cn等. 我们在新浪微博上公布网址的时候.微博会自己主动判别网址.并将其转换,比如:http://t.cn/h ...

  5. 采用WindowManager添加您自己的自定义视图

    原文地址:使用WindowManager加入自己定义视图 在写手机卫士的时候,用户拨打|接听电话须要显示号码归属地,然后出现了一些异常.在此留下记号,希望对麻友们有帮助: BUG教程 在使用 view ...

  6. CGI原理解析系列之中的一个----CGI怎样获取WEBserver数据

    //gcc get_post.c -o get_post.ums; #include <stdio.h> #include <stdlib.h> #include <un ...

  7. HDU 2203 亲串（kmp）

    Problem Description 随着人们年龄的增长更大,更聪明还是越大越愚蠢,这是一个值,相同的问题Eddy也一直在思考,由于他在非常小的时候就知道亲和串怎样推断了,可是发现,如今长大了却不知 ...

  8. weighted Kernel k-means 加权核k均值算法理解及其实现（一）

    那就从k-means开始吧 对于机器学习的新手小白来说,k-means算法应该都会接触到吧.传统的k-means算法是一个硬聚类(因为要指定k这个参数啦)算法.这里利用百度的解释 它是数据点到原型的某 ...

  9. OpenWRT GPIO人口控制 WLED

    Linux根据系统GPIO系统架构简介 关于这个GPIO我一直认为非常非常长的时间easy.但.当你需要给一个特定的系统,参与这些GPIO什么时候.你会找到.不对,实例,mt7620n. GPIO#7 ...

  10. socket套接字TCP API

    socket套接字TCP API socket概念 socket又称"套接字",是计算机网络中进程间通信数据通道的一个端点.或称之为句柄.IP地址+port号就能够唯一确定一个so ...