web-dev-qa-db-fra.com

JavaScript Comment déplacer dynamiquement une div en cliquant dessus et en le faisant glisser

D'accord, il semblerait que cela devrait être simple. Je dois prendre une div déjà existante et la déplacer en fonction de la position de la souris dans la fenêtre. J'ai cherché partout et cela m'a conduit à des méthodes compliquées de faire la même chose et implique l'utilisation de j-query. Je dois utiliser strictement javascript pour ce que j'essaie de faire.

Méthode : 

var mousePosition;
var div;

(function createDiv(){

    div = document.createElement("div");
    div.style.position = "absolute";
    div.style.left = "0px";
    div.style.top = "0px";
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.background = "red";
    div.style.color = "blue";

    div.addEventListener('mousedown', handleKeyPressed, true);

    document.body.appendChild(div);


})();

function handleKeyPressed(event) {

    event.preventDefault();

    mousePosition = {

        x : event.clientX,
        y : event.clientY

    };

    div.style.left = mousePosition.x;
    div.style.top = mousePosition.y;

    //alert("whoa!");

}
javascripthtmlonmousedown
19
StoneAgeCoder

Je pense que vous cherchez quelque chose de plus comme ça

var mousePosition;
var offset = [0,0];
var div;
var isDown = false;

div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "blue";

document.body.appendChild(div);

div.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        div.style.left = (mousePosition.x + offset[0]) + 'px';
        div.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);

FIDDLE

31
adeneo

Vérifiez si cela est plus lisse que adeneo: VIOLON

var m = document.getElementById('move');
m.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

function mouseUp() {
    window.removeEventListener('mousemove', move, true);
}

function mouseDown(e) {
    window.addEventListener('mousemove', move, true);
}

function move(e) {
    m.style.top = e.clientY + 'px';
    m.style.left = e.clientX + 'px';
};
6
jhyap

jquery est beaucoup plus facile à déployer. Je suis surpris que vous disiez que vous ne voulez pas l'apprendre.

Vous pouvez enregistrer le fichier jQuery sur votre ordinateur local afin de ne pas avoir besoin d’Internetpour utiliser les fonctions jQuery.

Dans mon cas, je l'ai enregistré dans le dossier des outils. Je n'ai donc pas besoin d'être sur internet.

Pour toutes les nombreuses lignes de code js répondues ci-dessus, vous n'avez besoin que d'une petite ligne.

 <script src="/common/tools/jquery-1.10.2.js"></script>
 <script src="/common/tools/jquery-ui.js"></script>

 <script>
   $(function() {
   $( "#mydiv_to_make_draggable" ).draggable();
   });
</script>
0
webzy

Je viens d’apporter un petit changement à la réponse @adeneo qui fonctionne très bien… Si tout est contenu dans une fonction et que chaque événement est associé à la div, vous pouvez l’utiliser comme partie d’une bibliothèque.

Appelez la fonction suivante en passant un identifiant. Si le div n'existe pas, il est créé.

function drag_div(div_id){
var div;

div = document.getElementById(div_id);

if(div == null){
   div = document.createElement("div");
   div.id = div_id;
   div.style.position = "absolute";
   div.style.left = "0px";
   div.style.top = "0px";
   div.style.width = "100px";
   div.style.height = "100px";
   div.style.background = "red";
   div.style.color = "blue";
   document.body.appendChild(div);
}

div.addEventListener('mousedown', function(e) {
    div.isDown = true;
    div.offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

div.addEventListener('mouseup', function() {
    div.isDown = false;
}, true);

div.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (div.isDown) {
        div.mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        div.style.left = (div.mousePosition.x + div.offset[0]) + 'px';
        div.style.top  = (div.mousePosition.y + div.offset[1]) + 'px';
    }
}, true);
}
0
minivip