使 javascript 弹出窗口可拖动

Posted 2023-05-08

技术标签:

【中文标题】使 javascript 弹出窗口可拖动【英文标题】：Making a javascript popup draggable 【发布时间】：2014-07-07 09:37:21 【问题描述】：

我正在创建一个 javascript 弹出窗口。代码如下。

HTML：

    <div id="ac-wrapper" style='display:none' onClick="hideNow(event)">
    <div id="popup">
        <center>
             <h2>Popup Content Here</h2> 
            <input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
        </center>
    </div>
</div>

CSS：

    #ac-wrapper 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("images/pop-bg.png") repeat top left transparent;
    z-index: 1001;

#popup 
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    height: 361px;
    margin: 5% auto;
    position: relative;
    width: 597px;

脚本：

function PopUp(hideOrshow) 
    if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
    else document.getElementById('ac-wrapper').removeAttribute('style');

window.onload = function () 
    setTimeout(function () 
        PopUp('show');
    , 0);


function hideNow(e) 
    if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';

jsFiddle 链接：

http://jsfiddle.net/K9qL4/2/

问题：

上面的脚本工作正常，但我需要使弹出窗口可拖动。

【问题讨论】：

【参考方案1】：

这里有一些代码可以满足您的需求。它只依赖一个名为drag 的对象来存储它的所有值，但您可以轻松地更改它。该示例依赖于一个 id 为 mydiv 的 div（在此实例中使用 document.write() 来提供它），其 position 属性为 absolute 或 fixed。您可以在Jamie 看到它的实际应用情况@

document.write("<" + "div id='mydiv' style='background:blue; width:100px;"
  "height:100px; position:fixed;'>" + "<" + "/div>");

var drag     = new Object();
drag.obj = document.getElementById('mydiv');

drag.obj.addEventListener('mousedown', function(e)

    drag.top  = parseInt(drag.obj.offsetTop);
    drag.left = parseInt(drag.obj.offsetLeft);
    drag.oldx = drag.x;
    drag.oldy = drag.y;
    drag.drag = true;
);

window.addEventListener('mouseup', function()

    drag.drag = false;
);

window.addEventListener('mousemove', function(e)

    drag.x    = e.clientX;
    drag.y    = e.clientY;
    var diffw = drag.x - drag.oldx;
    var diffh = drag.y - drag.oldy;

    if (drag.drag)
    
        drag.obj.style.left = drag.left + diffw + 'px';
        drag.obj.style.top  = drag.top  + diffh + 'px';
        e.preventDefault();
    
);

【讨论】：

好的，我会试试这个脚本并检查它是否适合我.. 感谢您的时间.. +1 的努力。【参考方案2】：

使用