一个可以在浏览器上自由移动的div

效果如上图

因为项目原因，本打算弄一个可自定义的弹窗，没弄明白。然后转向用div窗口获得，这里的获得是结合前一篇博客中的类似于开发者工具的js代码中的功能。一开始想的很简单，就直接把div在上面，后来想了想，这样要是用户想获得信息在div下面当着怎么办，于是就想到可以让div根据用户的需要进行移动。

于是开始找度娘，结果很失望，说的都不是那么好使，于是就决定自己去研究。

其实也不是很难，只要捕捉鼠标事件就可以了，当鼠标点下的时候，触发js函数，js函数判断此时的鼠标位置和当前的div位置，根据这些位置不断修改div的上偏移量与左偏移量，当鼠标松开后，函数停止调用。

本代码在chrome、Safari、QQ浏览器下能够成功运行；

但是在火狐浏览器(Firefox)下运行失败

接下来就是贴代码了

<script>
    var posX;
    var posY;
    fwuss = document.getElementById("wuss");
    fwuss.onmousedown=function(e){
        posX = event.x - fwuss.offsetLeft;//获得横坐标x
        posY = event.y - fwuss.offsetTop;//获得纵坐标y
        document.onmousemove = mousemove;//调用函数，只要一直按着按钮就能一直调用
    }
    document.onmouseup = function()
    {
        document.onmousemove = null;//鼠标举起，停止
    }
    function mousemove(ev)
    {
        if(ev==null) ev = window.event;//IE
        fwuss.style.left = (ev.clientX - posX) + "px";
        fwuss.style.top = (ev.clientY - posY) + "px";
    }
</script>

PS：注意这里要移动的div要有height与width值

以下是可移动的提示框（当然这里的wuss可以换成div，这里的WUSS是因为直接从项目里面截取下来的原因）

<wuss id="wuss" class="mydiv" style="left:0px;top: 20px;">
    <wuss id="wuss0">
        <form action="/add_url/" method="post" id="wuss1" >
            <input type ="hidden" name="urlid" value="{{ edit_url.id }}">
            <table id="wuss2">
                <tr>
                    <th width="100px"></th>
                    <th width="300px"></th>
                </tr>
                <tr>
                    <td><br></td>
                    <td></td>
                </tr>
                <tr>
                    <td><span class="edit_url_span color" id="wuss4">url:</span></td>
                    <td><input type="text" name="url" onchange="urlchange()" id="urlpart" /><br/></td>
                </tr>
                <tr>
                    <td><span class="edit_url_span color" id="wuss5">标题:</span></td>
                    <td><input type="text" name="title"/><br/></td>
                </tr>
                <tr>
                    <td><span class="edit_url_span color" id="wuss6">更新频率:</span></td>
                    <td><input type="text"size="1" name="update_fq " value="{{ edit_url.update_fq }}"/>天一次<br/></td>
                </tr>
                <tr>
                    <td><span class="edit_url_span color" id="wuss7">是否跟踪:</span></td>
                    <td>
                        <input type="radio" name="track_status" value="True" checked style="margin: 0px"><span class="color">是</span>
                        <input type="radio" name="track_status" value="False" checked style="margin: 0px"><span class="color">否</span> <br/>
                    </td>
                </tr>
            </table>
            <br>
            <table id="wuss3">
                <tr>
                    <td width="140px"></td>
                    <td width="80px"><a href="/../urlmanagement/" class="btn">返回</a> </td>
                    <td><input type="submit" value="确认添加" class="btn"></td>
                </tr>
            </table>
        </form>
    </wuss>
</wuss>

<style>
    .mydiv{
        position: fixed;
        width: 434px;
        height: 206px;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.73);
    }
    .color{
        color: white;
        right: 0px;
    }
</style>

原文在我的另一个博客:www.arnoldhby.pro