javascript utiliser glisser pour déplacer l'élément

Question

Comment définir la position d'un élément? Lorsque l'utilisateur fait glisser un élément (une image), j'aimerais le déplacer de manière synchrone. Je vois que mon gestionnaire "mousemove" est appelé. Cependant, je n'arrive pas à faire bouger l'élément.

est ici le gestionnaire mousemove (l'élément en cours de déplacement est "overlay"):

function handleMouseMove (event) 
{ 
    var deltaX = event.movementX; 
    var deltaY = event.movementY; 

    var divOverlay = document.getElementById ("overlay"); 
    var rect = divOverlay.getBoundingClientRect(); 

    divOverlay.style.left = rect.x + deltaX; 
    divOverlay.style.top = rect.y + deltaY; 
} 

est ici le code html pour "overlay":

<div id="overlay"> 
    ... some other stuff ... 
    <img id="large" src="something.jpg" > 
</div> 

Et le css:

#overlay {position:absolute; left:0; top:0} 

Il semble que l'action de déplacement par défaut se manifeste, qui est une ombre de "superposition" qui se déplace avec la souris. Mais l'élément lui-même ne bouge pas.

Answer 1

Pas sûr de votre mise en œuvre effective. Cependant ce code fonctionne:

Pour le faire en utilisant votre code, voici le code. Un problème évident avec votre code est que vous devez ajouter "px" à votre style.left et style.right. En outre, on ne sait pas comment vous gérez réellement l'événement à partir de votre code. En utilisant ce code, l'élément se déplace dans un cercle, vous devez le réparer mais vous avez l'idée.

var divOverlay = document.getElementById ("overlay"); 
var isDown = false; 
divOverlay.addEventListener('mousedown', function(e) { 
    isDown = true; 
}, true); 

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

document.addEventListener('mousemove', function(event) { 
    event.preventDefault(); 
    if (isDown) { 
    var deltaX = event.movementX; 
    var deltaY = event.movementY; 
    var rect = divOverlay.getBoundingClientRect(); 
    divOverlay.style.left = rect.x + deltaX + 'px'; 
    divOverlay.style.top = rect.x + deltaX + 'px'; 
} 
}, true); 

---

Ci-dessous est une autre façon de le faire. Codepen example

var offset = [0,0]; 
var divOverlay = document.getElementById ("overlay"); 
var isDown = false; 

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

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

document.addEventListener('mousemove', function(e) { 
    event.preventDefault(); 
    if (isDown) { 
     divOverlay.style.left = (e.clientX + offset[0]) + 'px'; 
     divOverlay.style.top = (e.clientY + offset[1]) + 'px'; 
    } 
}, true); 

Answer 2

Est-ce que jQuery est une option pour vous? Cela rend ce que vous faites vraiment simple puisque le code existe déjà.

http://jqueryui.com/demos/draggable/

Démo: http://jsfiddle.net/wfbY8/4/

code JavaScript

window.onload = addListeners; 

function addListeners(){ 
    document.getElementById('dxy').addEventListener('mousedown', mouseDown, false); 
    window.addEventListener('mouseup', mouseUp, false); 

} 

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

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

function divMove(e){ 
    var div = document.getElementById('dxy'); 
    div.style.position = 'absolute'; 
    div.style.top = e.clientY + 'px'; 
    div.style.left = e.clientX + 'px'; 
}​ 

Answer 3

J'ai fait quelque chose il y a quelques semaines pour similaires angulaire, see here. Cela pourrait peut-être vous aider un peu. Fondamentalement, je voulais faire quelque chose que vous pensez probablement faire, mais pour utiliser les événements de glisser vous devez également déposer les éléments que vous faites glisser (du moins c'est ce que j'ai fini par chercher). Donc, si vous voulez juste faire glisser/déplacer les éléments, vous devez être en mesure de définir leur position sur la page en utilisant top, bottom et left, right styles. Donc, vous ces éléments doivent avoir la position fixed ou absolute idéalement.

Ensuite, vous allez pour le noyau de ceci, qui est de calculer le vecteur que vous allez déplacer l'élément avec. Étant donné que l'événement mousemove distribue uniquement les MouseEvent qui vous permettent d'accéder aux coordonnées de la souris, vous pouvez compter dans quel vecteur votre souris s'est déplacée et déplacer l'élément par le même vecteur.

En fait ce que je faisais était (espérons qu'il est compréhensible dans ES5):

var elementPosition = [0,0]; 
var mousePosition = [0,0]; 
var element   = document.getElementById('yourElement'); 

var mainEH = function (event) { 
    mousePosition = [event.clientX, event.clientY]; 
    document.addEventListener('mousemove', calcEH); 
    document.addEventListener('mouseup', removeHandlers); 
    document.addEventListener('contextmenu', removeHandlers); 
}; 

var calcEH = function (event) { 
    var vector  = [-mousePosition[0] + event.clientX, -mousePosition[1] + event.clientY]; 
    mousePosition = [mousePosition[0] + vector[0], mousePosition[1] + vector[1]]; 
    elementPosition = [elementPosition[0] + vector[0], elementPosition[1] + vector[1]]; 
    updatePosition(); 
}; 

var removeHandlers = function() { 
    document.removeEventListener('mousemove', calcEH); 
    document.removeEventListener('mouseup', removeHandlers); 
    document.removeEventListener('contextmenu', removeHandlers); 
}; 

function updatePosition() { 
    element.style.left = elementPosition[0] + "px"; 
    element.style.top = elementPosition[1] + "px"; 
} 

element.addEventListener('mousedown', mainEH, true); 

Je ne sais pas si ce code exact fonctionne comme je ne peux pas tester maintenant, mais vous pouvez voir here comment je l'ai cela en utilisant angulaire. J'espère que ça marchera très bien pour vous. Au moins, vous avez l'idée. Quoi qu'il en soit, vous devrez peut-être exécuter une fonction qui définit la position initiale de l'élément pour vous.

MISE À JOUR

Je viens juste de réaliser que ce n'est pas exactement ce que vous cherchez. Si je vous ai bien compris, vous voulez déplacer tout l'élément en le faisant glisser. Cependant, je vais probablement laisser la réponse ici parce que la solution pourrait être assez similaire. Je le ferais probablement en utilisant la logique que j'ai posté auparavant et pour être en mesure de déplacer l'élément je définirais sa position à absolu pendant que l'événement mousemove est déclenché, puis sur mouseup vous pouvez supprimer l'attribut absolu de position.