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

Pour ceux qui (comme moi) sont déçus par l'implémentation html5 du drag&drop, voici une solution basique, vanille, cross-browser, sans pièges et entièrement personnalisable :

html :

<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="draggable"></div>

js :

var currentElement, currentDropzone, offsetX, offsetY;
function findZoneUnderPoint(x, y) {
  var dropzones = preview.querySelectorAll(".dropzone");
  for (var i = 0; i < dropzones.length; i++) {
    var box = dropzones[i].getBoundingClientRect();
    if (x > box.left && x < box.right && y > box.top && y < box.bottom) {
      return dropzones[i];
    }
  }
}
function onMouseDown(event) {
  currentElement = event.target.closest(".draggable");
  if (currentElement) {
    var box = currentElement.getBoundingClientRect();
    offsetX = event.clientX - box.x;
    offsetY = event.clientY - box.y;
    currentElement.classList.add("drag");           
    currentElement.style.width = box.width.toFixed()+"px";
    currentElement.style.height = box.height.toFixed()+"px";    
    currentElement.style.left = (event.clientX - offsetX) + "px";
    currentElement.style.top = (event.clientY - offsetY) + "px";
    currentElement.style.position = "fixed";
    currentElement.style.zIndex = "999";
    this.addEventListener("mousemove", onMouseMove);
    this.addEventListener("mouseup", onMouseUp);
  }
}
function onMouseMove(event) {
  currentElement.style.left = (event.clientX - offsetX) + "px";
  currentElement.style.top = (event.clientY - offsetY) + "px";
  var dropzone = findZoneUnderPoint(event.clientX, event.clientY);
  if (dropzone !== currentDropzone) {
    if (dropzone) {
      // -> drag enter zone
    }
    if (currentDropzone) {
      // -> drag leave zone
    }
    currentDropzone = dropzone;
  }
}
function onMouseUp(event) {
  var dropzone = findZoneUnderPoint(event.clientX, event.clientY);
  if (dropzone) {
    // -> drag complete
  } else {
    // -> drag canceled
  }
  currentElement = null;
  document.removeEventListener("mouseup", onMouseUp);
  document.removeEventListener("mousemove", onMouseMove);
}
document.addEventListener("mousedown", onMouseDown);

Note : Element.closest() polyfill est nécessaire pour le support ie.

Answer 2

Comme déjà mentionné, ceci est géré par le navigateur -> vous ne pouvez pas changer ce comportement, mais si vous avez vraiment besoin de cet effet, essayez de rechercher le mouvement de la souris lorsque celle-ci est abaissée (en bref : glisser), vérifiez quel élément est sélectionné et créez une copie à la volée qui suit le curseur de votre souris. cela ressemble à un travail idéal pour jQuery ;)

mais si vous n'en avez pas désespérément besoin, je n'essaierais pas de changer les valeurs par défaut des navigateurs, car les gens y sont habitués et peuvent être confus si quelque chose se comporte d'une autre manière (inconnue).

Answer 3

Bien que ce ne soit probablement pas la vraie solution au problème de base, j'ai une idée de ce qui pourrait fonctionner, au moins j'ai testé cela dans un de mes projets GWT il y a quelque temps et cela a fonctionné, donc je suppose que cela pourrait fonctionner en JS natif aussi bien que je n'ai pas d'exemple de code :

1. Au lieu d'utiliser la fonction de glissement, créez un nouvel élément qui est égal à l'élément à glisser à la position originale de l'élément à glisser. L'élément original à glisser doit être rendu invisible maintenant. Implémentez une logique qui restaure l'élément original et supprime le clone dès que la souris n'est plus pressée.

2. Faire en sorte que l'élément clone colle à la position de la souris. L'événement qui supprime le clone doit également vérifier si la souris est relâchée alors que l'élément à déplacer est positionné sur une zone où l'élément original pourrait être déplacé.

3. Si c'est vrai, supprimez le clone et déplacez l'élément original vers le conteneur cible.

Il y a certainement beaucoup de travail d'ajustement à faire dans les CSS et les JS également, mais cela pourrait être une astuce pour submerger la norme JS.

Answer 4

Je pense que la transparence ne vient pas du contenu web mais du navigateur et de l'OS. Si vous voulez changer l'opacité, vous devez modifier ou pirater le navigateur et l'OS.

Answer 5

Un exemple fonctionnel datant de 2012 peut être consulté sur chrome (vous devez utiliser chrome) sous "chrome://apps/". Si vous souhaitez savoir exactement comment ils ont procédé, ouvrez la page outils de développement ( strg + shift + i puisque le clic gauche est utilisé pour un menu contextuel personnalisé) et commencer la rétro-ingénierie (la ligne 7241 dans index.html est un bon point de départ).

Voici un bref résumé :

Ils ont cloné l'élément traîné sur dragstart l'a ajouté dans un conteneur de niveau supérieur et l'a positionné sur le curseur sur drag . Afin d'éviter de bloquer les événements vers les éléments réels, ils ont stylisé le clone avec pointer-events: none;