zoukankan      html  css  js  c++  java
  • 可以拖动的层(兼容firefox)

    <!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" lang="gb2312">
    <head>
    <title> 代码实例:拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title>
    <meta name="keywords" content="代码实例:拖动对象">
    <meta name="description" content="最简短的拖动对象代码实例演示">
    <style type="text/css">
    #lt{position:relative;cursor:move;}
    </style>
    <script type="text/javascript">
    var ie=document.all;
    var nn6=document.getElementById&&!document.all;
    var isdrag=false;
    var y,x;
    var oDragObj;

    function moveMouse(e) {
    if (isdrag) {
    oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
    oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
    return false;
    }
    }

    function initDrag(e) {
    var oDragHandle = nn6 ? e.target : event.srcElement;
    var topElement = "HTML";
    while (oDragHandle.tagName != topElement && oDragHandle.id != "lt") {
    oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
    }
    if (oDragHandle.id=="lt") {
    isdrag = true;
    oDragObj = oDragHandle;
    nTY = parseInt(oDragObj.style.top+0);
    y = nn6 ? e.clientY : event.clientY;
    nTX = parseInt(oDragObj.style.left+0);
    x = nn6 ? e.clientX : event.clientX;
    document.onmousemove=moveMouse;
    return false;
    }
    }
    document.onmousedown=initDrag;
    document.onmouseup=new Function("isdrag=false");
    </script>
    </head>
    <body>
    <div style="border:1px solid #ff6d00;background:#ffd801;200px;padding:5px 0;" id="lt">这些都是可拖动对象</div>
    <div style="border:1px solid #ff6d00;background:#ffd801;240px;padding:5px 0;" id="lt">这些都是可拖动对象</div>
    <div style="border:1px solid #ff6d00;background:#ffd801;280px;padding:5px 0;" id="lt">这些都是可拖动对象</div>
    <div style="border:1px solid #ff6d00;background:#ffd801;320px;padding:5px 0;" id="lt">这些都是可拖动对象</div>
    </body>
    </html>

  • 相关阅读:
    3、linux网络编程--网络字节序
    1、linux网络编程--网络协议
    第四篇:进程
    第五篇:进程通信
    第六篇:线程原理
    操作系统基本概念
    第一篇:基础原理篇
    第二篇:操作系统历史
    (2)linux下的简单的socket通信实例
    (3)基于linux的socket编程TCP半双工client-server聊天程序
  • 原文地址:https://www.cnblogs.com/tongdengquan/p/6090583.html
Copyright © 2011-2022 走看看