Un drag'n drop fait maison assez bancal

anonyme, dimanche 25 septembre 2016 à 21h19
Modifié

Bonjour à tous,

Je voudrais mettre en place un petit système de glisser-déposer auquel j'ajoute une fonctionnalité qu'on ne trouve pas habituellement, mais je rencontre deux problèmes dont je vais vous parler ici. Vous trouverez en fin de message mon code source et vous pourrez directement tester ce dernier (il contient tout ce qu'il faut pour ce faire !).

Ce que je veux obtenir

Si cela n'est pas très clair, n'hésitez pas à lancer le code que je vous fournis en fin de message : vous aurez un visuel.

Je cherche à avoir un div n°1, une sorte de fenêtre, ayant pour contenu un élément h1 et un élément div n°2. La fenêtre doit être déplaçable quand on effectue un clic+un déplacement (drag'n drop).

La fonctionnalité dont j'ai parlé est la suivante : quand je fais un simple clic sur la fenêtre, le div n°2 (donc le contenu) disparaît/ré-apparaît. La fenêtre, elle, évidemment, ne disparaît jamais.

Mon avancement + Les problèmes que je rencontre

Le drag'n drop est implémenté. Firefox est le seul navigateur où la fenêtre continue de se déplacer alors que j'ai relâché mon touchpad/bouton de la souris (c'est un problème !). Je vous explique comment est effectué le drag'n drop un peu plus loin.
L'affichage/la disparition du contenu de ma fenêtre marche parfaitement. Quand je clique sur la fenêtre, son contenu s'affiche ou disparaît. MAIS quand je fais un drag'n drop, cette fonctionnalité d'affichage/de disparition s'active également ! C'est un problème : l'affichage/disparition ne doit avoir lieu que lors d'un simple clic, pas lors d'un drag'n drop.

Drag'n drop

Le drag'n drop repose sur la gestion de 3 événements.

mousedown indique à mousemove si l'internaute voudrait faire un drag'n drop sur cette fenêtre (le cas échéant, cet événement autorisera mousemove à faire le drag'n drop).
mouseup indique à mousemove si l'internaute a fini de faire le drag'n drop et inhibe donc mousemove le cas échéant.
mousemove, qui dit : "l'internaute est en train de déplacer sa souris dans le navigateur : si jamais il veut faire un drag'n drop, alors on y va !" (donc cet événement repose sur mousedown et mouseup).

Source

Voilà pour les explications. Je souhaiterais dans un premier temps résoudre le bogue n°1 (Firefox ne fait pas bien le drag'n drop et je ne vois pas pourquoi). Merci d'avance !

index.HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script type="text/javascript" src="Movable.js"></script>
<script type="text/javascript" src="WithBanner.js"></script>
<script type="text/javascript">
    var with_banner3 = new WithBanner(0, 0, "darkgray", "Déplacez-moi, cliquez-moi !", "Lorem ipsum dolor...");
    with_banner3.display();
    with_banner3.setCanBeHidden();
</script>

</body>
</html>

Movable.JS

/**
 * This class wraps an HTML element
 *
 * @param x
 * @param y
 * @param width
 * @param height
 * @param background_color
 * @constructor
 */
function Movable(x, y, background_color, width, height) {
    this.is_moving = false;
    this.html_element = document.createElement("div");

    this.html_element.style.position = "absolute";
    this.html_element.style.top = y + "px";
    this.html_element.style.left = x + "px";
    this.html_element.style.width = width + "px";
    this.html_element.style.height = height + "px";
    this.html_element.style.background = background_color;

    this.activateMoving  = function() {
        this.is_moving = true;
    };
    this.html_element.onmousedown = this.activateMoving.bind(this);

    this.deactivateMoving = function() {
        this.is_moving = false;
    };
    this.html_element.onmouseup = this.deactivateMoving.bind(this);

    /**
     * Displays and activates MOUSEMOVE's handler !
     */
    this.display = function() {
        document.body.appendChild(this.html_element);
        document.addEventListener("mousemove", moveElement.bind(this)); // addEventListener required : not onmousemove =

        function moveElement(event) {
            if(this.is_moving) {
                this.html_element.style.top = event.pageY + "px";
                this.html_element.style.left = event.pageX + "px";
            }
        }
    };
}

/*
*
* FONCTIONNEMENT DU CLIC+DEPLACEMENT
* ----------------------------------
* Soit la variable "ISMOVING" initialisée à FALSE.
* Quand l'internaute déclenche l'événement MOUSEDOWN sur le bloc, la variable "ISMOVING" est assignée à TRUE.
* Quand l'internaute déclenche l'événement MOUSEUP sur le bloc, "ISMOVING" est assignée à FALSE.
* Quand "ISMOVING" est assignée à TRUE et que l'internaute déclenche l'événement MOUSEMOVE sur la page, la position du bloc
* est mise à jour à celle du curseur.
* */

WithBanner.JS

function WithBanner(x, y, background, title, content, width, height) {
    // Inheritance : it extends Movable !
    Movable.call(this, x, y, background, width||"initial", height||"initial");

    /**
     * "Window"'s title
     * @type {Element}
     */
    this.title = document.createElement("h1");
    this.title.innerHTML = title;
    this.html_element.appendChild(this.title);

    /**
     * "Window"'s content (a `div` for example)
     * @type {Element}
     */
    this.content = document.createElement("div");
    this.content.innerHTML = content;
    this.content.style.background = "green";
    this.html_element.appendChild(this.content);

    /**
     * Displays or hides the "window"
     */
    this.setCanBeHidden = function() {
        var click = function() {
            if(this.content.style.display != "none") {
                this.content.style.display = "none";
            } else {
                this.content.style.display = "block";
            }
        };
        this.html_element.onclick = click.bind(this);
    };
}