web-dev-qa-db-ja.com

ゴーストイメージのドラッグを防ぐCSS / JS

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

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

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

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

javascripthtmlcsshtml5css3
115
user885355

マークアップまたはJavaScriptコードで draggable 属性をfalseに設定できます。 このデモ を参照してください。

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

変えられると思う

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

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

img{pointer-events: none;}

避けるようにしてください

*{pointer-events: none;}
17
Erik Rybalkin

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

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

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

9
SLaks

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

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

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

8
Beejor

本当にドラッグイベントを使用する必要があり、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);
        }
    });
4
louisinhongkong

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

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

<div id="photo-drag-proxy"></div>
3
Michael Jasper

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

楽しい。

2
dijipiji

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

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

ここには、空のイベントリスナーを追加するよりもはるかに簡単なソリューションがあります。 pointer-events: noneを画像に設定するだけです。それでもクリック可能にする必要がある場合は、イベントをトリガーするコンテナをその周りに追加します。

1
Micros

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

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

EDIT：これは、奇妙なことにIEおよびFirefoxでのみ機能します。また、各画像にdraggable = falseを追加しました。 ChromeとSafariのゴーストのままです。

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

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

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

background-Repeat:no-repeat;
background-Position: center center;
0
Tama Yoshi

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

setDragImage

つかいます

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

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

0
Thibauld Nuyten