CSS / JS, aby zapobiec przeciąganiu obrazu-widma?

Czy istnieje sposób, aby uniemożliwić użytkownikowi zobaczenie ducha obrazu, który próbują przeciągnąć (nie dotyczy to bezpieczeństwa obrazów, ale wrażenia).

Wypróbowałem to, co rozwiązuje problem z niebieskim zaznaczeniem tekstu i obrazów, ale nie z obrazem-duchem:

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

(Próbowałem też zagnieżdżać obraz w elemencie div, stosując te same zasady, co w przypadku elementu div). Dzięki

Możesz ustawić draggableatrybut na falsew kodzie znaczników lub JavaScript.

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

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

Myślę, że możesz zmienić swoje

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

do

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

Spróbuj:

img {
  pointer-events: none;
}

i staraj się tego unikać

* {
  pointer-events: none;
}

Możesz użyć właściwości CSS, aby wyłączyć obrazy w przeglądarkach Webkit.

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

Spowoduje to wyłączenie przeciągania obrazu we wszystkich przeglądarkach , zachowując jednocześnie inne zdarzenia, takie jak kliknięcie i najechanie kursorem. Działa tak długo, jak długo dostępny jest dowolny z HTML5, JS lub CSS.

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

Jeśli jesteś pewien, że użytkownik będzie miał JS, wystarczy użyć atrybutu JS, itp. Aby uzyskać większą elastyczność, zapoznaj się z ondragstart, onselectstart i niektórymi plikami CSS typu tap / touch WebKit.

Obsługuj dragstartwydarzenie i return false.

Możesz przypisać alternatywny obraz ducha, jeśli naprawdę potrzebujesz użyć zdarzeń przeciągania i nie możesz ustawić draggable = false. Po prostu przypisz pusty plik png w następujący sposób:

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

Umieść obraz jako tło pustego elementu div lub pod przezroczystym elementem. Gdy użytkownik klika obraz, aby przeciągnąć, klika element div.

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

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

W przypadku przeglądarki Firefox musisz pójść trochę głębiej z tym:

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

Cieszyć się.

Zauważyłem, że w przypadku IE należy dodać atrybut draggable = "false" do obrazów i kotwic, aby zapobiec przeciąganiu. opcje CSS działają we wszystkich innych przeglądarkach. Zrobiłem to w jQuery:

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

Jest o wiele łatwiejsze rozwiązanie niż dodanie pustych detektorów zdarzeń. Po prostu ustaw pointer-events: noneswój obraz. Jeśli nadal chcesz, aby było klikalne, dodaj wokół niego kontener, który wyzwala zdarzenie.

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

Testowane w przeglądarce Firefox: usuwanie i przywracanie obrazu działa! I jest przezroczysty również podczas wykonania. Na przykład,

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

EDYCJA : Dziwnie działa to tylko w IE i Firefox. Dodałem też draggable = falsedo każdego obrazu. Wciąż duch z Chrome i Safari.

EDYCJA 2 : Rozwiązanie obrazu tła jest naprawdę najlepsze. Jedyną subtelnością jest to, że background-sizewłaściwość musi być przedefiniowana za każdym razem, gdy zmienia się obraz tła! A przynajmniej tak to wyglądało z mojej strony. Co więcej, miałem problem z normalnymi imgtagami w IE, gdzie IE nie mógł zmienić rozmiaru obrazów. Teraz obrazy mają prawidłowe wymiary. Prosty:

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

Warto też rozważyć te:

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

Możesz ustawić obraz, który jest wyświetlany, gdy element jest przeciągany. Przetestowano w Chrome.

setDragImage

posługiwać się

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

Alternatywnie, jak już wspomniano w odpowiedziach, możesz ustawić draggable="false"element HTML, jeśli brak możliwości przeciągnięcia elementu w ogóle nie stanowi problemu.

Koniec wszystkiego, bez wybierania ani przeciągania, ze wszystkimi prefiksami przeglądarki:

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

Możesz również ustawić draggableatrybut na false. Można to zrobić z inline HTML: draggable="false"z javascript: elm.draggable = falsealbo z jQuery: elm.attr('draggable', false).

Możesz również obsłużyć onmousedownfunkcję do return false. Możesz to zrobić za pomocą wbudowanego HTML:, onmousedown="return false"Javascript: elm.onmousedown=()=>return false;lub jQuery:elm.mousedown(()=>return false)

Ta praca dla mnie, używam niektórych skryptów lightbox

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