브라우저에서 자유롭게 이동할 수 있는div

효과는 위의 그림과 같다
프로젝트 때문에 사용자 정의 탄창을 만들려고 했는데 잘 모르겠어요.그리고div 창으로 전환해서 얻을 수 있습니다. 이 획득은 이전 블로그의 개발자 도구와 유사한 js 코드를 결합한 기능입니다.처음에 간단하게 생각했을 때 직접div를 위에 두었다가 나중에 생각해 봤는데 만약에 사용자가 정보를 얻으려면div 아래에서 어떻게 해야 할지 생각해서div가 사용자의 수요에 따라 이동할 수 있다고 생각했다.
그래서 도모를 찾기 시작했는데 실망스러워서 말이 잘 안 나와서 연구를 하기로 했어요.
사실 어렵지 않다. 마우스 이벤트를 포착하면 된다. 마우스를 눌렀을 때 js 함수를 촉발하고 js 함수는 이때의 마우스 위치와 현재div 위치를 판단한다. 이런 위치에 따라div의 위 편이량과 왼쪽 편이량을 계속 수정하고 마우스가 풀리면 함수는 호출을 중지한다.
이 코드는 크롬, 사파리, 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