web-dev-qa-db-ja.com

CSS "：drop-hover"擬似クラスはありますか？

私はinput type="file"フィールド。 「参照」をクリックしてファイルを選択する代わりに、このinput（Firefoxのように）にファイルをドロップできます。

ここで、inputにファイルをドロップしようとしているときにフィールドの背景色を変更して、少しカスタマイズします。本当に使用できない:hoverドラッグ＆ドロップしていなくても一致するため。それを行うためのCSS（擬似クラス）はありますか？

また、ドロップされるファイルが受け入れられない場合と受け入れられる場合に異なるスタイルを設定するCSSの方法はありますか？たとえば、フィールドがaccept属性を使用するPNGファイルのみを受け入れる場合、PNGファイルをドロップしようとしている場合はフィールドを緑にし、それが別のタイプのファイルである場合は赤にします。

[〜＃〜] css [〜＃〜]これらを今日行う方法はありますか？ [〜＃〜] css [〜＃〜]でそうする予定の方法はありますか（今後の仕様/現在の仕様と同様ですが、どこにも実装されていません）？

htmlcsscss-selectorspseudo-class
20
Xenos

更新：@ -Renatoのコメントのおかげで、 https://github.com/w3c/csswg-drafts/issues/2257 によると、drop擬似クラスは削除されました。

_:drop_および:drop()疑似クラスがあり、現在は Working Draft ステータスです。

http://css4.rocks/selectors-level-4/drag-and-drop-pseudo-class.php によると、ブラウザのサポートは良くありません。

「ドロップされるファイルは受け入れられません」の場合、:drop(invalid active)は今後機能する予定です。

12
shaochuancs

私も同じ質問をして、nashcheezとは少し違った方法で解決しました。ただし、まだJavaScriptを使用しています（ここでは、jQueryを使用して単純化しています）。

function drag(ev) {
  ev.dataTransfer.setData("text", "foo");
}

function allowDrop(ev) {
  $(ev.target).attr("drop-active", true);
  ev.preventDefault();
}

function leaveDropZone(ev) {
  $(ev.target).removeAttr("drop-active");
}

function drop(ev) {
  ev.preventDefault();
  $(ev.target).removeAttr("drop-active");
  alert(ev.dataTransfer.getData("text"));
}
#draggableItem {
  height: 50px;
  width: 150px;
  background-color: #eee;
}

#dropZone {
  height: 50px;
  width: 150px;
  background-color: #efe;
}

#dropZone[drop-active=true] {
  box-shadow: inset 0px 0px 0px 2px #00C;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="draggableItem" draggable="true" ondragstart="drag(event);">Drag Me</div>

<div id="dropZone" ondragover="allowDrop(event);" ondragleave="leaveDropZone(event);" ondrop="drop(event);">Drop Here</div>

これをSafari、Firefox、Chromeでテストしましたが、IEは試していません。私はおそらくカスタム属性でルールを破っていますが、CSS4を待っている間はうまくいくようです。

8
TobyRush

現在、ブラウザウィンドウに要素をドラッグアンドドロップするときに要素のプロパティを変更するための純粋なcss cross-browserソリューションはありません。

ここでやろうとしていることは、隠しコンテナを使用し、オブジェクトがドラッグ可能なコンテナ内にある場合にのみ表示するJavascript/jQueryによって実現できます。

ご覧になりたい場合は、以前に保存したこのデモがあります。

var resetTimer;

var reset = function() {
  $('#d1').hide();
};

var f = function(e) {
  var srcElement = e.srcElement ? e.srcElement : e.target;

  if ($.inArray('Files', e.dataTransfer.types) > -1) {
    e.stopPropagation();
    e.preventDefault();

    e.dataTransfer.dropEffect = (srcElement.id == 'd1') ? 'copy' : 'none';

    if (e.type == "dragover") {
      if (resetTimer) {
        clearTimeout(resetTimer);
      }
      $('#d1').show();
      console.info('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.types is ' + e.dataTransfer.types + '\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0));

    } else if (e.type == "dragleave") {
      resetTimer = window.setTimeout(reset, 25);
    } else if (e.type == "drop") {
      reset();
      alert('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0));
    }
  }
};

document.body.addEventListener("dragleave", f, false);
document.body.addEventListener("dragover", f, false);
document.body.addEventListener("drop", f, false);
body {
  border: 1px solid black;
}

#d0,
#d2 {
  border: 1px solid black;
}

#d1 {
  border: 1px solid black;
  display: none;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="d0">drag files onto this page</div>
  <div id="d1">-&gt; drop here &lt;-</div>
  <div id="d2">and stuff will happen</div>
</body>
2
nashcheez