CSS / JSでゴースト画像のドラッグを防ぎますか？

ユーザーがドラッグしようとしている画像のゴーストを表示しないようにする方法はありますか（画像のセキュリティについてではなく、エクスペリエンスについて）。

私はこれを試しましたが、テキストと画像の青い選択の問題を修正しましたが、ゴースト画像は修正していませんでした：

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

（私は、divに同じルールを適用して、div内に画像をネストしてみました）。ありがとう

あなたは、設定することができますdraggableに属性をfalseマークアップやJavaScriptコードのいずれかで。

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

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

あなたはあなたを変えることができると思います

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

に

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

それを試してみてください：

img {
  pointer-events: none;
}

そして避けようとする

* {
  pointer-events: none;
}

CSSプロパティを使用して、Webkitブラウザーで画像を無効にすることができます。

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

これにより、すべてのブラウザで画像のドラッグが無効になり、クリックやホバーなどの他のイベントが保持されます。HTML5、JS、CSSのいずれかが利用可能である限り機能します。

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

ユーザーがJSを使用できると確信している場合は、JS属性などを使用するだけで済みます。柔軟性を高めるには、ondragstart、onselectstart、および一部のWebKitタップ/タッチCSSを調べます。

dragstartイベントを処理しreturn falseます。

本当にドラッグイベントを使用する必要があり、draggable = falseを設定できない場合は、代替ゴーストイメージを割り当てることができます。したがって、次のように空白のpngを割り当てるだけです。

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

画像を空のdivの背景として、または透明な要素の下に配置します。ユーザーがドラッグする画像をクリックすると、divをクリックします。

http://www.flickr.com/photos/thefella/5878724253/?f=hpを参照してください

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

Firefoxの場合、これを少し深く理解する必要があります。

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

楽しい。

IEの場合、ドラッグを防ぐために画像とアンカーにdraggable = "false"属性を追加する必要があることがわかりました。CSSオプションは他のすべてのブラウザで機能します。私はjQueryでこれを行いました：

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

空のイベントリスナーを追加するよりもはるかに簡単な解決策があります。pointer-events: none画像に合わせてください。それでもクリック可能にする必要がある場合は、イベントをトリガーするコンテナをその周りに追加します。

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

Firefoxでテスト済み：画像を削除して元に戻すことができます！また、実行時にも透過的です。例えば、

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

編集：これは奇妙なことにIEとFirefoxでのみ機能します。draggable = false各画像にも追加しました。それでもChromeとSafariのゴースト。

編集2：背景画像のソリューションは、本当に最高のソリューションです。唯一の微妙な点はbackground-size、背景画像が変更されるたびにプロパティを再定義する必要があることです。または、それは私の側から見たものです。さらに良いことに、imgIEの通常のタグに問題があり、IEが画像のサイズを変更できませんでした。これで、画像のサイズが正しくなりました。シンプル：

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

また、おそらくそれらを考慮してください：

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

アイテムをドラッグしたときに表示される画像を設定できます。Chromeでテスト済み。

setDragImage

使用する

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

または、回答ですでに述べたdraggable="false"ように、要素をまったくドラッグできない場合でも、HTML要素に設定できます。

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;

draggable属性をに設定することもできますfalse。これは、インラインHTML：draggable="false"、Javascript：、elm.draggable = falseまたはjQuery：で実行できelm.attr('draggable', false)ます。

onmousedown関数を処理することもできreturn falseます。これは、インラインHTML：onmousedown="return false"、JavaScript：、elm.onmousedown=()=>return false;またはjQueryを使用して実行できます。elm.mousedown(()=>return false)

これは私のために働き、私はいくつかのライトボックススクリプトを使用しています

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