it-swarm.com.de

CSS / JS, um das Ziehen von Geisterbildern zu verhindern?

Gibt es eine Möglichkeit zu verhindern, dass der Benutzer einen Geist des Bildes sieht, das er zu ziehen versucht (keine Sorge um die Sicherheit der Bilder, sondern um die Erfahrung)?.

Ich habe dies ausprobiert, wodurch das Problem mit der blauen Auswahl auf Text und Bildern behoben wird, aber nicht mit dem Geisterbild:

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

(Ich habe auch versucht, das Bild innerhalb eines Divs zu verschachteln, wobei die gleichen Regeln auf das Div angewendet wurden). Vielen Dank

115
user885355

Sie können das Attribut draggable im Markup- oder JavaScript-Code auf false setzen. Siehe diese Demo .

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

Ich denke du kannst deine ändern

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

in ein

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

Versuch es:

img{pointer-events: none;}

und versuchen zu vermeiden

*{pointer-events: none;}
17
Erik Rybalkin

Mit einer CSS-Eigenschaft können Sie Bilder in Webkit-Browsern deaktivieren.

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

Behandle das dragstart -Ereignis und return false.

9
SLaks

Dadurch wird das Ziehen für ein Bild in alle Browser deaktiviert, während andere Ereignisse wie Klicken und Bewegen beibehalten werden. Funktioniert, solange HTML5, JS oder CSS verfügbar sind.

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

Wenn Sie sicher sind, dass der Benutzer über JS verfügt, müssen Sie nur das JS-Attribut usw. verwenden. Weitere Informationen zur Flexibilität finden Sie in ondragstart, onselectstart und einigen WebKit-CSS-Anweisungen zum Tippen/Berühren.

8
Beejor

Sie können ein alternatives Geisterbild zuweisen, wenn Sie wirklich Ziehereignisse verwenden müssen und draggable = false nicht festlegen können. Weisen Sie einfach ein leeres PNG wie folgt zu:

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

Platzieren Sie das Bild als Hintergrund eines leeren Div oder unter einem transparenten Element. Wenn der Benutzer auf das Bild klickt, um es zu ziehen, klickt er auf ein Div.

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

<div id="photo-drag-proxy"></div>
3
Michael Jasper

Für Firefox müssen Sie dies etwas vertiefen:

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();
    }

Genießen.

2
dijipiji

Ich habe festgestellt, dass Sie für IE den Bildern und Ankern das Attribut draggable = "false" hinzufügen müssen, um das Ziehen zu verhindern. Die CSS-Optionen funktionieren für alle anderen Browser. Ich habe das in jQuery gemacht:

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

Hier gibt es eine viel einfachere Lösung, als leere Ereignis-Listener hinzuzufügen. Setze einfach pointer-events: nonezu deinem Bild. Wenn Sie weiterhin darauf klicken müssen, fügen Sie einen Container hinzu, der das Ereignis auslöst.

1
Micros

Getestet mit Firefox: Entfernen und Wiederherstellen des Images funktioniert! Und es ist auch bei der Ausführung transparent. Zum Beispiel,

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

EDIT : Dies funktioniert nur auf IE und auf Firefox, seltsamerweise. Ich habe auch draggable = false auf jedem Bild. Immer noch ein Geist mit Chrome und Safari.

EDIT 2: Die Hintergrundbildlösung ist wirklich die beste. Die einzige Subtilität ist, dass die background-size Eigenschaft muss bei jeder Änderung des Hintergrundbildes neu definiert werden! Zumindest sah es von meiner Seite so aus. Besser noch, ich hatte ein Problem mit normalen img -Tags unter IE, bei denen IE die Größe der Bilder nicht geändert werden konnte. Jetzt haben die Bilder die richtigen Abmessungen. Einfach:

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

Vielleicht sollten Sie auch Folgendes berücksichtigen:

background-Repeat:no-repeat;
background-Position: center center;
0
Tama Yoshi

Sie können das Bild festlegen, das beim Ziehen eines Elements angezeigt wird. Getestet mit Chrome.

setDragImage

verwenden

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

Alternativ können Sie, wie bereits in den Antworten erwähnt, draggable="false" für das HTML-Element, wenn das Element überhaupt nicht gezogen werden kann, ist dies kein Problem.

0
Thibauld Nuyten