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>

  • 相关阅读:
    eXtremeDB 简单开发
    MFC PostMessage SendMessage
    char string 区别
    div 水平垂直居中
    npm—小记
    ECharts简单运行例子
    HTML在表格中添加echarts图表
    Sublime Text 3配置JavaScript运行环境
    bjdctf_2020_YDSneedGrirlfriend
    wdb_2018_2nd_easyfmt
  • 原文地址:https://www.cnblogs.com/julina/p/3290587.html
Copyright © 2011-2022 走看看