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

Cacher l'image originale en utilisant event.dataTransfer.setDragImage(new Image(), 0, 0); au début du déplacement. onDrag récupère l'image fantôme, met à jour la position à l'aide de event.pageX , event.pageY

Answer 2

Ne me demandez pas pourquoi cela fonctionne, mais si vous définissez l'opacité à 0,99999 au lieu de 1, cela fonctionne pour moi. Je suis vraiment curieux de savoir pourquoi, alors si quelqu'un le sait, merci de me faire part de vos réflexions.

Answer 3

Si vous utilisez JavaScript, dans la fonction qui gère l'événement dragStart, incluez l'opacité du style à 1, par exemple :

function dragStartHandler(e) {
   this.style.opacity = '1.0';
}

Answer 4

Suggestion, faites ce qui suit, maintenant pour cela j'utilise jQuery, essayez, avant de dire que quelque chose ne fonctionne pas, nous ne sommes pas ici pour donner des réponses, mais ici pour vous indiquer la bonne direction.

function dragStartHandler(e) { 
   $("span.{CLASS}")addClass('overdrag'); 
} 

vous devez alors trouver un moyen d'indiquer qu'il a cessé de traîner et s'est mis en position, puis de RemoveClass('overdrag') ;

Ce n'est pas difficile à faire, donc je pense que vous devriez être capable de le faire. Je tiens à remercier @DonaldHuckle car c'est vraiment sa solution et non la mienne.