使 javascript 弹出窗口可拖动

Question

我正在创建一个 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/

问题：

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

Answer 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();
    }
});

Answer 2

使用

.draggable();

jquery 函数，这是你更新的小提琴：

http://jsfiddle.net/N9rQK/

如果你不想使用 jQuery，你应该阅读这个主题：Draggable div without jQuery UI