Créer un popup javascript draggable

Question

Je crée un popup JavaScript. Le code est comme ci-dessous.

Le code 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> 

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

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

Le jsFiddle Lien:

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

La question:

Le script ci-dessus fonctionne très bien, mais je dois faire le popUp draggable.

Answer 1

Utilisez le

.draggable(); 

Fonction jquery, voici votre violon mise à jour:

http://jsfiddle.net/N9rQK/

Si vous ne souhaitez pas utiliser jQuery, vous devriez lire ce sujet: Draggable div without jQuery UI

Answer 2

Voici un code qui fera ce que vous voulez. Il repose uniquement sur un objet appelé drag pour stocker toutes ses valeurs, mais vous pouvez facilement le modifier. L'exemple repose sur l'existence d'un div avec l'ID de mydiv (un document.write() est utilisé dans cette instance pour fournir cela) qui a un attribut position de absolute ou fixed. Vous pouvez le voir en action à Jamie

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

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