Clone d'image déplaçable en Javascript

Question

J'essaie de faire glisser une image mais de faire glisser un clone de l'image (plutôt que l'image elle-même). La copie semble fonctionner correctement, mais le déclencheur onmousemove ne semble pas se déclencher tant que le déclencheur onmouseup n'a pas été déclenché. Je ne pense pas que c'est ainsi que les choses ont fonctionné.

Code de travail ci-dessous

var Draggable = { 
    obj : null, 
    clone : null, 
    lastMessageSent : null, 

    init : function(o) { 
    o.style.cursor = "move"; 
    o.onmousedown = function(e) { 
     Draggable.obj = this; 
     Draggable.start(e); 
    }; 
    }, 

    start : function(e) { 
    e.preventDefault(); 

    Draggable.obj.style.cursor = "move"; 
    Draggable.createClone(); 

    window.onmousemove = function(e) { Draggable.beginDrag(e) }; 
    window.onmouseup = function(e) { Draggable.endDrag(e) }; 
    }, 

    createClone : function() { 
    Draggable.clone = Draggable.obj.cloneNode(true); 
    Draggable.clone.style.position = "absolute"; 
    Draggable.clone.style.top = "-800px"; 
    Draggable.clone.style.left = "-800px"; 
    Draggable.clone.style.zIndex = "90000"; 
    Draggable.clone.style.opacity = .35; 
    Draggable.clone.id = "dragClone"; 

    document.body.appendChild(Draggable.clone); 
    }, 

    beginDrag : function(e) { 
    var scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop); 
    Draggable.clone.style.top = (e.clientY - 40 + scrollTop) + "px"; 
    Draggable.clone.style.left = (e.clientX - 40) + "px"; 
    }, 

    endDrag : function (e) { 
    window.onmousemove = window.onmouseup = null; 
    Draggable.obj.style.cursor = "normal"; 
    Draggable.clone.parentNode.removeChild(Draggable.clone); 
    }, 

}; 


window.onload = function() { Draggable.init(document.getElementById("monkey")) }; 

Answer 1

Avez-vous essayé d'utiliser SetCapture sur la documentElement (tag html)?

start : function() 
{  
    Draggable.createClone(); 
    documentElement.setCapture(); 
    documentElement.onmousemove = Draggable.beginDrag; 
    documentElement.onmouseup = Draggable.endDrag; 
}, 

endDrag : function() 
{ 
    documentElement.releaseCapture(); 
    documentElement.onmousemove = null; 
} 

Ceci ferait en sorte que tous les événements de souris soient capturés par le documentElement. Vous ne pouvez pas utiliser setCapture sur l'objet document, même si les événements doivent toujours apparaître. Voir le MSDN documentation pour setCapture.

Answer 2

EDIT: Je pense que le problème principal est que vous mettez le clone devant l'original. Pourquoi ne pas essayer de mettre le clone derrière et de déplacer l'original à la place, puisque c'est ce que l'événement mousedown déclenche pour la première fois?

Comme mon autre réponse n'était pas compatible avec tous les navigateurs, je pensais que j'y retournerais. Au lieu d'appeler Draggable.start dans l'image onmousedown, utilisez plutôt le document pour capturer un objet masqué qui surgit de l'image, en vérifiant la propriété srcElement de l'objet événement pour vérifier que l'image a été cliquée.

Voici un exemple de la façon dont il pourrait fonctionner, définir un attribut de classe de l'image draggable pour contenir le mot « Draggable »:

document.onmousedown = function() 
{ 
    if (/Draggable/.test(event.srcElement.className)) 
    { 
     Draggable.obj = event.srcElement; 
     Draggable.start; 
    } 
} 

Assurez-vous que le bouillonnement d'événement ne soit pas annulée par quoi que ce soit son chemin vers le haut du document.

Answer 3

L'action de déplacement par défaut des navigateurs remplaçait l'action de glissement que j'essayais d'implémenter.

Résolu en appelant preventDefaults() sur l'événement mousedown.

init : function(o) { 
    Draggable.obj = o; 
    o.onmousedown = Draggable.start; 
}, 

start : function(e) { 
    e.preventDefault(); 
    Draggable.createClone(); 
    document.onmousemove = Draggable.beginDrag; 
    document.onmouseup = Draggable.endDrag; 
}, 

plus d'info: https://developer.mozilla.org/en/DOM/event.preventDefault