4

画像をドラッグすると、マウスを押したままにすると半透明のゴースト画像が表示されます。

CSS / JSを適用して、特定の部分でこの効果を取り除く方法はありますか？

4

7 に答える 7

7

最も簡単な方法は、非常に大きく、画面から離れた位置に座標を設定xすることですy。setDragImage例えば：

element.addEventListener('dragstart', function(event) {
    event.dataTransfer.setDragImage(element, -99999, -99999);
}, false);

渡す実際の要素は実際には重要でsetDragImageはありません。ここでは便宜上同じ要素を使用します。

于 2016-02-26T20:43:48.517 に答える
6

ブラウザでこれを無効にする唯一の方法（Safariでも同じことを行います）は、要素（または）のイベントfalseから戻り、残りのドラッグ操作をjavascriptで処理することです。onmousedownimgevent.preventDefault()

ほとんどすべての主要なJavaScriptライブラリは、「ドラッグ」と「ドロップ」をサポートしています。あなたは彼らのコードを出発点として使うことができます、あるいはあなたがすでにあなたのページでライブラリを使っているならそれを完全に使うことができます。

于 2009-12-03T00:34:10.680 に答える
3

draggable="false"画像に属性を追加するだけです。また、コンテナを追加しdivます。

例えば

<div draggable="true">
<img draggable="false" src="your/path/to/image.png"/>
Optional Text
<div>

また、追加

function handleDragStart(e) {
  // other code
  var dragIcon = document.createElement('img');
  dragIcon.src = 'another/image/path.png';
  e.dataTransfer.setDragImage(dragIcon, -10, -10);
  // other code
}
于 2012-08-28T08:37:10.287 に答える
1

imgタグ付きの実際の画像の代わりに、cssの背景画像を使用してみることができます。

于 2009-12-03T00:31:16.097 に答える
1

ondragstartイベントからfalseを返す必要があります。私は自分でこの問題を抱えていました、そしてそれが私がそれを解決した方法です。これはIE7でも問題です。問題は、IEのドラッグアンドドロップAPI、html5への標準化、およびFirefoxによるその後の実装です。

ドラッグアンドドロップにjavascriptライブラリを使用するという他の提案は機能しません。（私はすでにjquery UIを使用していました）これはFirefoxの最近のものであり、jQueryUIはそれを説明していないようです。

于 2009-12-03T00:39:35.143 に答える
0

私はそれがブラウザの振る舞い/機能だと思います。それを処理できる特定のFFCSSスタイルがわかりません。

Firefoxのコードを変更して独自のfirefoxを作成することをお勧めします。プログラム以外でそれを行うための何らかの手段を探しているなら、superuser.comに投稿する必要があると思います：P

于 2009-12-03T00:33:25.793 に答える
0

about:configこれをオフにするFirefoxのオプションがあります---nglayout.enable_drag_imagesしかし、明らかにそれはあなたのためだけに機能します。すべての訪問者のためにそれを削除したいと思いますか？

ドラッグアンドドロップを実行したい場合は、jQueryUIまたは別のJSライブラリを試してみてください。他の要素は非常に簡単に移動できるはずであり、Timがそれらの1つで言ったような背景画像を使用できます。

そのもう1つの利点は、CSSスプライト効果を使用してHTTPリクエストを減らすことができることです。jQuery UIを使用してジグソーパズルを作成しました。これは実際には1つの画像だけですが、複数のように見えます。

于 2009-12-03T00:34:55.763 に答える