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

Gibt es eine Möglichkeit, den Benutzer daran zu hindern, einen Geist des Bildes zu sehen, das er ziehen möchte (keine Sorge um die Sicherheit der Bilder, sondern um die Erfahrung).

Ich habe dies versucht, wodurch das Problem mit der blauen Auswahl für Text und Bilder behoben wird, nicht jedoch für das 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 in einem Div zu verschachteln, wobei die gleichen Regeln für das Div gelten). Vielen Dank

Sie können das draggableAttribut falseentweder im Markup- oder im JavaScript-Code festlegen .

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

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

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

Versuch es:

img {
  pointer-events: none;
}

und versuchen zu vermeiden

* {
  pointer-events: none;
}

Sie können eine CSS-Eigenschaft verwenden, um Bilder in Webkit-Browsern zu deaktivieren.

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

Dadurch wird das Ziehen für ein Bild in allen Browsern 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 Flexibilität finden Sie in ondragstart, onselectstart und einigen WebKit-Tap / Touch-CSS.

Behandeln Sie die dragstartVeranstaltung und return false.

Sie können ein alternatives Geisterbild zuweisen, wenn Sie wirklich Drag-Ereignisse 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);
        }
    });

Platzieren Sie das Bild als Hintergrund eines leeren Divs oder unter einem transparenten Element. Wenn der Benutzer zum Ziehen auf das Bild klickt, klickt er auf ein Div.

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

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

Für Firefox müssen Sie etwas tiefer gehen:

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.

Ich habe festgestellt, dass Sie für IE das Attribut draggable = "false" zu Bildern und Ankern hinzufügen müssen, um ein 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);

Hier gibt es eine viel einfachere Lösung als das Hinzufügen leerer Ereignis-Listener. Stellen pointer-events: noneSie einfach Ihr Bild ein. Wenn Sie weiterhin darauf klicken müssen, fügen Sie einen Container hinzu, der das Ereignis auslöst.

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

Auf Firefox getestet: Das Entfernen und Zurücksetzen des Bildes 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');
});

BEARBEITEN : Dies funktioniert seltsamerweise nur im IE und in Firefox. Ich habe auch draggable = falsejedes Bild hinzugefügt . 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-sizeEigenschaft jedes Mal neu definiert werden muss, wenn das Hintergrundbild geändert wird! Zumindest sah es von meiner Seite so aus. Besser noch, ich hatte ein Problem mit normalen imgTags unter IE, bei denen IE die Größe der Bilder nicht ändern konnte. Jetzt haben die Bilder die richtigen Abmessungen. Einfach:

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

Betrachten Sie vielleicht auch diese:

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

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"das HTML-Element festlegen , wenn es kein Problem ist, das Element überhaupt nicht ziehen zu können.

Das A und O ohne Auswahl oder Ziehen mit allen Browserpräfixen:

-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;

Sie können das draggableAttribut auch auf festlegen false. Sie können dies mit Inline-HTML : draggable="false", mit Javascript: elm.draggable = falseoder mit jQuery: tun elm.attr('draggable', false).

Sie können die onmousedownFunktion auch an handhaben return false. Sie können dies mit Inline-HTML : onmousedown="return false", mit Javascript: elm.onmousedown=()=>return false;oder mit jQuery: tun.elm.mousedown(()=>return false)

Diese Arbeit für mich, ich benutze einige Lightbox-Skripte

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