Making a javascript popup draggable

Question

I am creating a JavaScript popup. The code is as below.

The 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>

The 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;
}

The Script:

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';
}

The jsFiddle Link:

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

The Issue:

The above script works fine, but I need to make the popUp draggable.

score 5 · Answer 1 · edited May 26 '18 at 13:40

Here's some code that will do what you want. It relies only on an object called drag to store all its values, but you can easily alter that. The example relies on there being a div with the id of mydiv (a document.write() is used in this instance to supply that) that has a position attribute of absolute or fixed. You can see it in action at 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();
    }
});

ok I shall try this script and check whether it works for me .. Thanks for your time .. +1 for the efforts. — Nitesh, May 21 '14 at 06:18

score 3 · Answer 2 · edited May 23 '17 at 12:11

3

Use the

.draggable();

jquery function, here is your updated fiddle:

http://jsfiddle.net/N9rQK/

If you don't want to use jQuery, you should read this subject: Draggable div without jQuery UI

edited May 23 '17 at 12:11

Community

1
1

answered May 19 '14 at 12:19

Superdrac

1,208
17
29

1

I'm not sure if OP wants to use jQuery as his fiddle is pure javascript. – Smeegs May 19 '14 at 12:20
2

Thanks Superdrac, but I am not using jQuery here .. I am using pure javaScript .. Thanks for your time .. +1 for your efforts – Nitesh May 19 '14 at 12:23
1

pure javascript === re-inventing the wheel, IMHO – Mike C May 19 '14 at 12:23

Making a javascript popup draggable

2 Answers2

Linked