一個可以在瀏覽器上自由移動的div

效果如上圖

因爲項目原因，本打算弄一個可自定義的彈窗，沒弄明白。然後轉向用div窗口獲得，這裏的獲得是結合前一篇博客中的類似於開發者工具的js代碼中的功能。一開始想的很簡單，就直接把div在上面，後來想了想，這樣要是用戶想獲得信息在div下面當着怎麼辦，於是就想到可以讓div根據用戶的需要進行移動。

於是開始找度娘，結果很失望，說的都不是那麼好使，於是就決定自己去研究。

其實也不是很難，只要捕捉鼠標事件就可以了，當鼠標點下的時候，觸發js函數，js函數判斷此時的鼠標位置和當前的div位置，根據這些位置不斷修改div的上偏移量與左偏移量，當鼠標鬆開後，函數停止調用。

本代碼在chrome、Safari、QQ瀏覽器下能夠成功運行；

但是在火狐瀏覽器(Firefox)下運行失敗

接下來就是貼代碼了

<script>
    var posX;
    var posY;
    fwuss = document.getElementById("wuss");
    fwuss.οnmοusedοwn=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