HTML5 Drag and Drop - Pas de transparence ?

Question

Lorsque je glisse et dépose un élément sur ma page, celui-ci devient "fantôme". En fait, il obtient une certaine valeur de transparence.

Y a-t-il un moyen de le faire opacity: 1; ?

Answer 1

Il semble que cela ne soit pas possible. L'élément glissé est placé dans un conteneur qui a sa propre opacité, inférieure à 1. Cela signifie que si vous pouvez réduire l'opacité de l'élément glissé, vous ne pouvez pas la rendre supérieure à l'opacité de l'élément encapsulé.

Il pourrait Il est possible de remplacer les paramètres par défaut du navigateur pour ce type d'élément, mais comme rien n'est ajouté au DOM pendant le déplacement, ce serait au mieux très délicat.

Answer 2

Comme d'autres l'ont suggéré, vous aurez besoin d'une sorte de mécanisme qui le fera :

1. Masquer l'élément qui est en train d'être déplacé.
2. Créer un clone de l'élément qui est déplacé.
3. Placez le clone à la place de l'élément qui est déplacé.
4. Écoutez le drag pour positionner l'élément clone.

En pratique, ça ressemble à ça :

function Drag (subject) {
    var dative = this,
        handle,
        dragClickOffsetX,
        dragClickOffsetY,
        lastDragX,
        lastDragY;

    subject.draggable = true;

    dative.styleHandle(subject);

    subject.addEventListener('dragstart', function (e) {    
        handle = dative.makeHandle(subject);

        dragClickOffsetX = e.layerX;
        dragClickOffsetY = e.layerY;

        this.style.opacity = 0;
    });

    subject.addEventListener('drag', function (e) {
        var useX = e.x,
            useY = e.y;

        // Odd glitch
        if (useX === 0 && useY === 0) {
            useX = lastDragX;
            useY = lastDragY;
        }

        if (useX === lastDragX && useY === lastDragY) {
            return;
        }

        dative.translate(useX - dragClickOffsetX, useY - dragClickOffsetY, handle, subject);

        lastDragX = useX;
        lastDragY = useY;
    });

    subject.addEventListener('dragend', function (e) {
        this.style.opacity = 1;

        handle.parentNode.removeChild(handle);
    });
};

/**
 * Prevent the text contents of the handle element from being selected.
 */
Drag.prototype.styleHandle = function (node) {
    node.style['userSelect'] = 'none';
};

/**
 * @param {HTMLElement} subject
 * @return {HTMLElement}
 */
Drag.prototype.makeHandle = function (subject) {
    return this.makeClone(subject);
};

/**
 * Clone node.
 * 
 * @param {HTMLElement} node
 * @return {HTMLElement}
 */
Drag.prototype.makeClone = function (node) {
    var clone;

    clone = node.cloneNode(true);

    this.styleClone(clone, node.offsetWidth, node.offsetHeight);

    node.parentNode.insertBefore(clone, node);

    return clone;
};

/**
 * Make clone width and height static.
 * Take clone out of the element flow.
 *
 * @param {HTMLElement} node
 * @param {Number} width
 * @param {Nubmer} height
 */
Drag.prototype.styleClone = function (node, width, height) {
    node.style.position = 'fixed';
    node.style.zIndex = 9999;
    node.style.width = width + 'px';
    node.style.height = height + 'px';
    node.style.left = '-9999px';

    node.style.margin = 0;
    node.style.padding = 0;
};

/**
 * Used to position the handle element.
 * 
 * @param {Number} x
 * @param {Number} y
 * @param {HTMLElement} handle
 * @parma {HTMLElement} subject
 */
Drag.prototype.translate = function (x, y, handle, subject) {
    handle.style.left = x + 'px';
    handle.style.top = y + 'px';
};

Commencez par attacher un élément :

new Drag(document.querySelector('.element'));

Vous disposez ainsi d'un système de glisser-déposer fonctionnel, avec un contrôle total de l'apparence de l'élément à glisser. Dans l'exemple ci-dessus, je clone l'élément original pour l'utiliser comme poignée. Vous pouvez étendre l'élément Drag pour personnaliser la poignée (par exemple, utiliser une image pour représenter l'élément glissant).

Avant de vous emballer, il y a quelques points à considérer :

• La fonction "glisser-déposer" du WHATWG ne fonctionne pas avec les mobiles, HTML5 Drag & Drop pour les mobiles
• Il n'y a aucun moyen de capturer l'événement "libération de la poignée", Voir le lien pour la solution : Comment obtenir l'événement mouseup après l'événement drag natif ? .

Mise à jour :

J'ai écrit une bibliothèque pour la mise en œuvre tactile du mécanisme de glisser-déposer WHATWG, https://github.com/gajus/pan .

Answer 3

Si vous ne faites pas de glisser-déposer d'éléments depuis l'extérieur de la page Web (depuis le système d'exploitation), vous pouvez facilement résoudre ce problème en mettant en œuvre votre propre glisser-déposer. Il existe de nombreux exemples de glisser-déposer en javascript pur qui fonctionneront parfaitement dans un environnement HTML5 et que vous pourrez entièrement personnaliser.

réponse : (utiliser l'ancienne méthode)

Answer 4

A partir de 2021 Il n'est pas nécessaire de cloner l'élément. Le navigateur crée un clone semi-transparent qui suit le pointeur de la souris lors de l'événement glisser. Pendant ce temps, l'élément original glissé reste intact, sans aucune modification.

Si vous souhaitez montrer le élément original traîné vers suivez la souris pointer alors voici l'astuce.

Mise en place :

<!- HTML Code Sample ->
<div draggable="true" 
    ondragstart="onDragStart(event)" ondrag="onDrag(event)"
                    ondragend="onDragEnd(event)">

<!- JS Code Sample ->
var dx = 0, dy = 0, draggedItem = undefined;
function onDragStart(e) {}
function onDrag(e) {}
function onDragEnd(e) {}

Étape 1 : Enregistre la différence entre les coordonnées (x, y) de l'élément glissé et les coordonnées du pointeur de la souris en tant que delta.

function onDragStart(e) {
    draggedItem = e.target;
    dx = e.clientX - draggedItem..getBoundingClientRect().x;
    dy = e.clientY - draggedItem..getBoundingClientRect().y;
    draggedItem.style.position = 'absolute';
}

Étape 2 : Mettre à jour la position de l'élément glissé avec les coordonnées (x, y) du pointeur de la souris. N'oubliez pas de soustraire le delta.

function onDrag(e) {
    draggedItem.style.left = e.ClientX - dx;
    draggedItem.style.top = e.ClientY - dy;
}

Étape 3 : Selon qu'il faut conserver la nouvelle position de l'élément glissé ou exécuter une logique personnalisée.

function onDragEnd(e) {

    if('retain new position ???'){
        draggedItem.style.left = e.ClientX - dx;
        draggedItem.style.top = e.ClientY - dy;
    } else {
        draggedItem.style.position = 'static';

        // Add your custom logic to handle drag completion
    }

    // Clear temporary data
    draggedItem = undefined;
    dx = dy = 0;
}

L'événement onDrag est déclenché toutes les 350 ms et permet de créer une visualisation décente.

Answer 5

Veuillez voir ce travail violon

J'ai une solution pour faire une image opaque à la place du fantôme et cela fonctionne bien dans chrome.mais cela ne fonctionne pas dans FF.j'ai besoin de quelqu'un pour m'aider à le faire fonctionner dans Firefox et d'autres navigateurs. étapes 1) Nous allons créer notre propre image fantôme et la définir comme image de drapeau.

document.addEventListener("dragstart", function(e) {
var img = document.createElement("img");
img.src = "img/hackergotchi-simpler.png";
e.dataTransfer.setDragImage(img, 5000, 5000);//5000 will be out of the window
}, false);

2. nous allons cloner l'image et l'ajouter à DOM ondrag

var crt,dragX,dragY;
function drag(ev) {
    crt = ev.target.cloneNode(true);
    crt.style.position = "absolute"; 
    document.body.appendChild(crt);
    ev.dataTransfer.setData("text", ev.target.id);
}

Ensuite, nous ferons en sorte que le clone se déplace avec le curseur.

    document.addEventListener("dragover", function(ev){
ev = ev || window.event;
dragX = ev.pageX; dragY = ev.pageY;
crt.style.left=dragX+"px";crt.style.top=  dragY+"px";
console.log("X: "+dragX+" Y: "+dragY);
}, false);

4. enfin, la visibilité du clone disparaîtra.

   document.addEventListener("dragend", function( event ) {crt.style.display='none';});