CSS / JS hayalet görüntünün sürüklenmesini önlemek için?

Kullanıcının sürüklemeye çalıştıkları görüntünün bir hayaletini görmesini önlemenin bir yolu var mı (görüntülerin güvenliği ile ilgili endişe değil, deneyim).

Metin ve resimlerdeki mavi seçim ile ilgili sorunu çözen bu sorunu denedim ama hayalet resmi değil:

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

(Ayrıca div için uygulanan aynı kurallara sahip bir div içindeki görüntüyü iç içe yerleştirmeyi denedim). Teşekkürler

draggableÖzelliği falseişaretlemede veya JavaScript kodunda olarak ayarlayabilirsiniz .

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

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

Bence sen değiştirebilirsin

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

içine

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

Dene:

img {
  pointer-events: none;
}

ve kaçınmaya çalış

* {
  pointer-events: none;
}

Webkit tarayıcılarındaki görüntüleri devre dışı bırakmak için bir CSS özelliği kullanabilirsiniz.

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

Bu, tıklama ve fareyle üzerine gelme gibi diğer etkinlikleri korurken , tüm tarayıcılarda bir resmin sürüklenmesini devre dışı bırakır . HTML5, JS veya CSS'den herhangi biri kullanılabilir olduğu sürece çalışır.

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

Kullanıcının JS'ye sahip olacağından eminseniz, yalnızca JS özelliğini vb. Kullanmanız gerekir. Daha fazla esneklik için ondragstart, onelectstart ve bazı WebKit dokunma / dokunma CSS'lerine bakın.

dragstartEtkinliği halledin ve return false.

Sürükleme olaylarını gerçekten kullanmanız gerekiyorsa ve draggable = false ayarlayamıyorsanız alternatif bir hayalet resmi atayabilirsiniz. Yani sadece boş bir png atayın:

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

Görüntüyü boş bir div öğesinin arka planı olarak veya saydam bir öğenin altına yerleştirin. Kullanıcı sürüklemek için görüntüyü tıkladığında, bir div'ı tıklar.

Bkz. Http://www.flickr.com/photos/thefella/5878724253/?f=hp

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

Firefox için bununla biraz daha derine inmelisiniz:

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

Zevk almak.

IE için sürükleme önlemek için görüntüler ve çapa draggable = "false" özniteliği eklemeniz gerektiğini buldum. CSS seçenekleri diğer tüm tarayıcılarda çalışır. Bunu jQuery'de yaptım:

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

Burada boş olay dinleyicileri eklemekten çok daha kolay bir çözüm var. Sadece pointer-events: nonegörüntünüze ayarlayın . Yine de tıklanabilir olması gerekiyorsa, çevresine etkinliği tetikleyen bir kap ekleyin.

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

Firefox'ta test edildi: görüntüyü kaldırmak ve geri koymak çalışıyor! Ve idamda da şeffaf. Örneğin,

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

EDIT : Bu sadece IE ve Firefox, garip çalışır. draggable = falseHer görüntüye de ekledim . Hala Chrome ve Safari ile bir hayalet.

DÜZENLEME 2 : Arka plan görüntüsü çözümü gerçekten en iyisidir. Tek incelik, background-sizearka plan resmi her değiştiğinde özelliğin yeniden tanımlanması gerektiğidir! Ya da öyle, benim tarafımdan böyle görünüyordu. Daha da imgiyisi, IE'nin görüntüleri yeniden boyutlandıramadığı IE altında normal etiketlerle ilgili bir sorunum vardı . Şimdi görüntüler doğru boyutlara sahip. Basit:

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

Ayrıca, belki de bunları düşünün:

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

Bir öğe sürüklendiğinde gösterilen görüntüyü ayarlayabilirsiniz. Chrome ile test edildi.

setDragImage

kullanım

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

Alternatif olarak, cevaplarda daha önce de belirtildiği gibi draggable="false", öğeyi hiç sürükleyemiyorsanız sorun olmazsa HTML öğesini ayarlayabilirsiniz .

Tüm tarayıcı önekleriyle seçim yapmadan veya sürüklemeden be all-end-all:

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

Ayrıca draggableözniteliği de ayarlayabilirsiniz false. Bunu satır içi HTML:, draggable="false"Javascript: elm.draggable = falseveya jQuery: ile yapabilirsiniz elm.attr('draggable', false).

Ayrıca işleyebilir onmousedownfonksiyonu return false. Bunu satır içi HTML:, onmousedown="return false"Javascript: elm.onmousedown=()=>return false;veya jQuery ile yapabilirsiniz:elm.mousedown(()=>return false)

Bu iş benim için, bazı lightbox komut dosyaları kullanıyorum

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