CSS / JS pour empêcher le glissement de l'image fantôme?

Existe-t-il un moyen d'empêcher l'utilisateur de voir un fantôme de l'image qu'il essaie de faire glisser (pas de souci de sécurité des images, mais de l'expérience).

J'ai essayé ceci qui corrige le problème avec la sélection bleue sur le texte et les images mais pas l'image fantôme:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

(J'ai également essayé d'imbriquer l'image dans un div avec les mêmes règles appliquées au div). Merci

Vous pouvez définir l' draggableattribut falsedans le balisage ou le code JavaScript.

// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);

<img id="myImage" src="http://placehold.it/150x150">

Je pense que tu peux changer ton

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

dans une

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

Essayez-le:

img {
  pointer-events: none;
}

et essayez d'éviter

* {
  pointer-events: none;
}

Vous pouvez utiliser une propriété CSS pour désactiver les images dans les navigateurs Webkit.

img{-webkit-user-drag: none;}

Cela désactivera le glissement d'une image dans tous les navigateurs , tout en préservant d'autres événements tels que le clic et le survol. Fonctionne tant que HTML5, JS ou CSS sont disponibles.

<img draggable="false" onmousedown="return false" style="user-drag: none" />

Si vous êtes sûr que l'utilisateur aura JS, il vous suffit d'utiliser l'attribut JS, etc.

Gérez l' dragstartévénement et return false.

Vous pouvez attribuer une autre image fantôme si vous avez vraiment besoin d'utiliser des événements de glissement et que vous ne pouvez pas définir draggable = false. Alors attribuez simplement un png vierge comme ceci:

    $('#img').bind({
        dragstart: function(e) {
            var dragIcon = document.createElement('img');
            dragIcon.src = 'blank.png';
            dragIcon.width = 100;
            e.dataTransfer.setDragImage(dragIcon, -10, -10);
        }
    });

Placez l'image en arrière-plan d'un div vide ou sous un élément transparent. Lorsque l'utilisateur clique sur l'image à faire glisser, il clique sur un div.

Voir http://www.flickr.com/photos/thefella/5878724253/?f=hp

<div id="photo-drag-proxy"></div>

Pour Firefox, vous devez aller un peu plus loin avec ceci:

var imgs = document.getElementsByTagName('img');

    // loop through fetched images
    for (i = 0; i < imgs.length; i++) {
        // and define onmousedown event handler
        imgs[i].onmousedown = disableDragging;
    }

function disableDragging(e) {
        e.preventDefault();
    }

Prendre plaisir.

J'ai trouvé que pour IE, vous devez ajouter l'attribut draggable = "false" aux images et aux ancres pour empêcher le glissement. les options CSS fonctionnent pour tous les autres navigateurs. J'ai fait cela dans jQuery:

$("a").attr('draggable', false); 
$("img").attr('draggable', false);

Il existe ici une solution beaucoup plus simple que d'ajouter des écouteurs d'événements vides. Réglez simplement pointer-events: nonevotre image. Si vous avez toujours besoin qu'il soit cliquable, ajoutez un conteneur autour de lui qui déclenche l'événement.

<img src="myimage.jpg" ondragstart="return false;" />

Testé sur Firefox: supprimer et remettre l'image fonctionne! Et c'est aussi transparent lors de l'exécution. Par exemple,

$('.imageContainerClass').mousedown(function() {
    var id = $(this).attr('id');
    $('#'+id).remove();
    $('#'+id).append('Image tag code');
});

EDIT : Cela ne fonctionne que sur IE et sur Firefox, étrangement. J'ai également ajouté draggable = falsesur chaque image. Encore un fantôme avec Chrome et Safari.

EDIT 2 : La solution d'image d'arrière-plan est vraiment la meilleure. La seule subtilité est que la background-sizepropriété doit être redéfinie à chaque fois que l'image de fond est modifiée! Ou alors, c'est à quoi ça ressemblait de mon côté. Mieux encore, j'ai eu un problème avec les imgbalises normales sous IE, où IE n'a pas réussi à redimensionner les images. Maintenant, les images ont les bonnes dimensions. Facile:

$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');

Aussi, considérez peut-être ceux-ci:

background-Repeat:no-repeat;
background-Position: center center;

Vous pouvez définir l'image qui s'affiche lorsqu'un élément est déplacé. Testé avec Chrome.

setDragImage

utilisation

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

Alternativement, comme déjà mentionné dans les réponses, vous pouvez définir draggable="false"l'élément HTML, sinon ne pas pouvoir faire glisser l'élément du tout n'est pas un problème.

Le be-all-end-all, sans sélection ni glissement, avec tous les préfixes de navigateur:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;

Vous pouvez également définir l' draggableattribut sur false. Vous pouvez le faire avec HTML en ligne: draggable="false"avec Javascript: elm.draggable = falseou avec jQuery: elm.attr('draggable', false).

Vous pouvez également gérer la onmousedownfonction en return false. Vous pouvez le faire avec HTML en ligne:, onmousedown="return false"avec Javascript:, elm.onmousedown=()=>return false;ou avec jQuery:elm.mousedown(()=>return false)

Ce travail pour moi, j'utilise des scripts lightbox

.nodragglement {
    transform: translate(0px, 0px)!important;
}