zoukankan      html  css  js  c++  java
  • js实现拖动div,兼容IE、FireFox,暂不兼容Chrome


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <style type="text/css">
    .move{300px; height:200px;position:absolute; border-style:solid; border-color:#F00;}
    .move2{300px; height:200px;position:absolute; border-style:solid; border-color:#F00; left:400px; top:400px;}
    .title{300px; height:20px;border-color:#39F; background-color:#FF0; }
    </style>
    <script type="text/javascript">
    var Obj;
    document.onmouseup = MUp;
    document.onmousemove = MMove;
    function MDown(objMove, event) {
    Obj = document.getElementById(objMove);
    if (window.event) {
    event = window.event;
    Obj.setCapture();
    }
    else {
    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    }
    pX = event.clientX - Obj.offsetLeft;
    pY = event.clientY - Obj.offsetTop;
    }
    function MMove(event) {
    if (window.event) event = window.event;
    if (Obj) {
    Obj.style.left = event.clientX - pX + "px";
    Obj.style.top = event.clientY - pY + "px";
    }
    }
    function MUp(event) {
    if (Obj) {
    if (window.event) Obj.releaseCapture();
    else window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    Obj = null;
    }
    }
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <div id="move" class="move">
    <div id="box" class="title" onmousedown="MDown('move', event);">Title</div>
    </div>
    <div id="move2" class="move2">
    <div id="box2" class="title" onmousedown="MDown('move2', event);">Title</div>
    </div>
    </div>
    </form>
    </body>
    </html>

  • 相关阅读:
    Ajax基本用法
    浏览器兼容性问题
    对闭包的简单理解
    JSON
    Ajax知识
    对jsonp原理理解
    java Active Object模式(上)
    物联网传输协议MQTT
    谈谈如何在面试中发掘程序猿的核心竞争力
    响应式Web设计的9项基本原则
  • 原文地址:https://www.cnblogs.com/julina/p/3290587.html
Copyright © 2011-2022 走看看