Bir HTML sayfasından resim sürüklemeyi devre dışı bırakma

195

Sayfama bir resim koymam gerekiyor. Bu görüntünün sürüklenmesini devre dışı bırakmak istiyorum. Çok şey deniyorum ama yardım yok. Biri bana yardım edebilir mi ?

Bu görüntüyü arka plan görüntüsü olarak tutmak istemiyorum çünkü görüntüyü yeniden boyutlandırıyorum.

— Kullanıcı 1034
kaynak

15

@AgentConundrum - Kullanıcı kaydeder ve istediği her şeyi yaparsa benim için sorun yok. Tek ihtiyacım bu resmi sürüklememek.

— Kullanıcı 1034

264

Bunu beğenebilirsiniz ...

document.getElementById('my-image').ondragstart = function() { return false; };

Çalıştığını görün (ya da çalışmıyor)

Görünüşe göre jQuery kullanıyorsunuz.

$('img').on('dragstart', function(event) { event.preventDefault(); });

— alex
kaynak

9

@alex - Görüntü sürüklememenin amacı görüntüyü çalmak değil. Amaç tamamen farklı. Bu görüntüyü sıralanabilir ve düşebilir yapıyorum. Bu yüzden açıklamak uzun zaman alıyor.

— Kullanıcı 1034

2

@alex - ondragstart tarayıcıdan bağımsız mı?

— Kullanıcı 1034

1

@AdamMerrifield Deneyin $(document)yerine$(window)

— rybo111

2

Ben sadece jQuery basitleştirmek için çalıştı:$('img').on('dragstart', false);

— rybo111

2

@alex Handler altında:The value false is also allowed as a shorthand for a function that simply does return false.

— Adam Merrifield

174

Yalnızca CSS çözümü: kullanım pointer-events: none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

— mikhuang
kaynak

3

Ancak bu, en azından FF'de garip seçim etkisine yol açar. Yine de yanlış döndürürsek iyi olur;

— Bhumi Singhal

resim bağlantı olarak kullanıldığında kullanılmaz.

— Nilesh patel

3

Bu IE (herhangi bir sürüm) işe yaramaz gibi görünüyor bkz: caniuse.com/pointer-events

— Justin Tanner

8

Ayrıca yalnızca CSS çözümü: öğesinin üzerine bir öğe yerleştirin img.

— alex

6

-1! Bu, TÜM ponter olaylarını (görüntü yüklemek istediğinizde olduğu gibi sürükleme dahil) önlemek için kullanılmalıdır. Javascript çözümünü kullanmayın!

— Denys Vitali

130

resim etiketinize draggable = "false" eklemeniz yeterlidir:

<img draggable="false" src="image.png">

IE8 ve altı desteklenmemektedir.

— dmo
kaynak

Benim div gibi Magento kullanıyorum: <div class = "product-img-box"> <? Php echo $ this-> getChildHtml ('media')?> </div> Nasıl sağ tıklamayı kısıtlayabilir ve sürüklenebilir benim görüntü div. @dmo

— Gem

41

window.ondragstart = function() { return false; }

— Ben
kaynak

4

+1 Aşağı oyları anlamıyorum. Nihai çözüm değildir, sadece özel bir görüntüyü değil, hepsini sürüklemeyi de önler. Ama doğru yönü gösteriyor (ve sanırım bunu yapan ilk cevaptı)

— Dr.Molle

@DrMolle Cevabımda Steve tarafından bırakılan (silindiğinden beri) yorumlara yanıt olmuş olabilir .

— alex

2

Bazen kullanıcıların yer imleri çubuğuna bir bağlantı sürükleyeceğini unutmayın - bu çözüm bu yeteneği kaldıracaktır.

— jClark

33

en basit çapraz tarayıcı çözümü

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

ile problem

img {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
 -webkit-touch-callout: none;
}

Firefox'ta çalışmıyor olması

— imal hasaranga perera
kaynak

25

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

Http://www.namdevmatrimony.in/ adresindeki web sitemde kullandım. Bir sihir gibi çalışıyor !!! :)

— Namdev Evlilik
kaynak

6

Firefox'ta sürüklenebilir

— Dean Christian Armada

24

Kendimi denedim ve bunun işe yaradığını gördüm.

$("img").mousedown(function(){
    return false;
});

Eminim bu, tüm görüntülerin sürüklenmesini devre dışı bırakır. Başka bir şeyi etkilediğinden emin değilim.

— Kullanıcı 1034
kaynak

3

Ah! JQuery kullandığınızdan / jQuery kullanabileceğinizden bahsetmelisiniz. JQuery kullanmak için +1.

— Alex

@alex - Üzgünüm. Ben kendim deniyordum. Ve başka bir şeyi etkilediğinden emin değilim.

— Kullanıcı 1034

iyisin! Hayır, bildiğim kadarıyla, burada sahip olduklarınızı yapmanın başka hiçbir şey üzerinde olumsuz bir etkisi olmamalıdır.

— Alex

2

Resim bir <a>etiketin içine sarılırsa ne olur ? Sonra kullanıcı görüntüyü tıklarsa, bağlantı tıklanmaz.

— SeinopSys

Teşekkürler. Btw, bu GWT'de bir `event.preventDefault ();` ile çalışır.

— Johanna

14

Bu cevaba bakınız ; Chrome ve Safari'de varsayılan sürüklemeyi devre dışı bırakmak için aşağıdaki stili kullanabilirsiniz:

-webkit-user-drag: auto | element | none;

Firefox ve IE (10+) için kullanıcı seçimini deneyebilirsiniz :

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

— MHU
kaynak

11

Sürüklenebilir olmasını istemediğiniz her resme ( imgetiketin içine ) aşağıdakileri ekleyebilirsiniz :

onmousedown="return false;"

Örneğin

img src="Koala.jpg" onmousedown="return false;"

— BOBO
kaynak

10

Bu kod tam olarak istediğinizi yapar. Olaya bağlı diğer eylemlere izin verirken görüntünün sürüklenmesini önler.

$("img").mousedown(function(e){
    e.preventDefault()
});

— Robert
kaynak

9

Doğrudan bunu kullanın: ondragstart="return false;"resim etiketinizde.

<img src="http://image-example.png" ondragstart="return false;"/>

Bir <div>etikete sarılmış birden fazla resminiz varsa :

<div ondragstart="return false;">
   <img src="image1.png"/>
   <img scr="image2.png"/>
</div>

Tüm büyük tarayıcılarda çalışır.

— Ocak
kaynak

8

Görüntülerim ajax kullanılarak oluşturulduğundan ve bu nedenle windows.load'da mevcut değildir.

$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });

Bu şekilde hangi bölümün davranışı engellediğini kontrol edebilirim, sadece bir olay bağlama kullanır ve gelecekteki ajax oluşturulan görüntüler için hiçbir şey yapmadan çalışır.

JQuery yeni onciltleme ile:

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (teşekkürler @ialphan)

— guzart
kaynak

1

.On kullanılması şu şekilde olacaktır: $ (document) .on ('dragstart', 'img', function (e) {e.preventDefault ();});

— ialphan

Bu doğru çözüm. imgŞimdiki veya gelecekteki sınırsız elemanlar için tek bir olay bağlama . En az yoğun, en sağlam.

— ayı arkadaşı

5

<img draggable="false" src="images/testimg1.jpg" alt=""/>

— Mustafa
kaynak

4

Harika bir çözüm, çatışmalar ile ilgili küçük bir sorun vardı, Eğer başka bir js kütüphanesinden herhangi birinin çatışması varsa, böyle bir çatışmayı etkinleştirmeyin.

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

Umarım bu birisine yardım eder.

— Paul
kaynak

3

Buradaki cevapların herkese yardımcı olup olmadığını bilmiyorum, ancak burada bir HTML sayfasındaki metinleri sürüklemeyi ve seçmeyi devre dışı bırakmanıza yardımcı olacak basit bir satır içi CSS hilesi var.

Senin üzerinde <body>etiket ekleme ondragstart="return false". Bu, görüntülerin sürüklenmesini devre dışı bırakır. Ancak metin seçimini de devre dışı bırakmak istiyorsanız ekleyin onselectstart="return false".

Kod şöyle görünecektir: <body ondragstart="return false" onselectstart="return false">

— Abhisek Das
kaynak

3

Çözümümü en iyi olarak düşünebilirsiniz. Cevapların çoğu, e.preventDefault () yanı sıra ondragstart olayı desteklenmeyeceği için IE8 gibi eski tarayıcılarla uyumlu değildir . Çapraz tarayıcı uyumlu yapmak için bu görüntü için fareyle üzerine gelme olayı engellemek zorunda . Aşağıdaki örneğe bakın:

jQuery

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

jQuery olmadan

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

IE8 için bile test edildi ve çalıştı

— CodeGems
kaynak

3

Aşağıdaki CSS özelliklerini görüntüye ayarlayın:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

— Omid Farvid
kaynak

1

Firefox'ta çalışmıyor gibi görünüyor (Mac Firefox 69 kullanarak)

— Ben Wheeler

2

Bu mümkündür ve gönderilen diğer cevaplar tamamen geçerlidir, ancak kaba bir güç yaklaşımı alabilir ve mousedowngörüntülerin varsayılan davranışını önleyebilirsiniz . Hangi, resmi sürüklemeye başlamaktır.

Bunun gibi bir şey:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};

— Alex
kaynak

2

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

Bu Plunker'da çalışıyor http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

— dtothefp
kaynak

2

Bunun için satır içi kodu kullanabilirsiniz

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">

Snippet'i genişlet

İkinci seçenek harici veya sayfa içi css kullanmaktır

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

<img src="http://www.ourkanpur.com/images/logo.png">

Snippet'i genişlet

Her ikisi de doğru çalışıyor Bu sitede harici css kullanıyorum (Buraya Tıklayın)

— Abhishek Kamal
kaynak

Bunların hiçbiri Firefox'ta çalışmıyor (Mac Firefox 69 kullanarak)

— Ben Wheeler

2

jQuery:

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

Gövde seçiciyi, çocukların sürüklenmesini ve düşürülmesini önlemek istediğiniz başka bir kapla değiştirebilirsiniz .

— Lis
kaynak

1

Cevap basit:

<body oncontextmenu="return false"/>- sağ tıklamayı <body ondragstart="return false"/>devre <body ondrop="return false"/>dışı bırak - fare sürüklemeyi devre dışı bırak - fare bırakmayı devre dışı bırak

— Kazanç
kaynak

-1

Ben burada gösterilen css özellikleri yanı sıra aşağıdaki javascript ile ondragstart izlemek yaptım:

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

— Alocus
kaynak

-2

Kendi çalmak cevap , sadece görüntü üzerinde aynı büyüklükteki bir tamamen şeffaf öğesi ekleyin. Resminizi yeniden boyutlandırdığınızda, öğeyi yeniden boyutlandırdığınızdan emin olun.

Bu, çoğu tarayıcı, hatta daha eski tarayıcılar için geçerli olmalıdır.

— Sablefoste
kaynak