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>

  • 相关阅读:
    一篇文章高效定位iframe
    URL与视图函数的映射
    include标签—引用文件路径
    UnitTest单元测试框架解析【实用篇】
    【案例演练】测试器与模板继承
    2招带你快速获取响应头与发送头
    dede网站如何更新地图sitemap.html
    申请微信小程序流程步骤
    phpstudy本地配置--dede织梦网
    stylus样式开发的使用----vue
  • 原文地址:https://www.cnblogs.com/julina/p/3290587.html
Copyright © 2011-2022 走看看