Есть ли CSS псевдокласс "drop-hover"?

Question

Сказать, что у меня есть input type="file" поле. На это можно скинуть файл input(как в Firefox) вместо нажатия кнопки "Обзор" и выбора файла.

Теперь я хочу немного его изменить, изменив цвет фона поля, когда кто-то собирается сбросить файл в input, Я не могу реально использовать :hover поскольку он совпадает, даже если вы не перетаскиваете. Есть ли CSS (псевдокласс) для этого?

И есть ли CSS-стиль для различного стиля, если удаляемый файл не принят и если это так? Скажем, если поле принимает только файлы PNG, использующие accept атрибуты, я бы сделал поле зеленым, если вы собираетесь добавить PNG-файл, и красным, если это другой тип файла.

Есть ли способ CSS сделать это сегодня? Есть ли запланированный способ сделать это в CSS (как в будущих спецификациях / в текущих спецификациях, но нигде не реализуется)?

Answer 1

Есть :drop а также :drop() псевдокласс, который в настоящее время находится в рабочем состоянии.

Согласно http://css4.rocks/selectors-level-4/drag-and-drop-pseudo-class.php, поддержка браузера не очень хорошая.

Для случая "файл удален не принято", :drop(invalid active) как ожидается, будет работать в будущем.

Answer 2

У меня был тот же вопрос, и я решил его немного иначе, чем нащез. Тем не менее, все еще использую 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.

Answer 3

Нет CSS-решения. Моя проблема заключалась в том, чтобы изменить цвет при перетаскивании (Chrome не поддерживает, Opera поддерживает)

Я делаю это так:

      `<input id="xyz" type="FILE" value=""  
    ondragover ="this.style.backgroundColor='#88FF88';" 
    ondragleave="this.style.backgroundColor='#FFFFFF';" 
/> 
<input type="button" onclick="srFU(this);" value="send File" />`

Answer 4

В настоящее время нет абсолютно чистого кросс-браузерного решения CSS для изменения свойств элементов при перетаскивании элементов в окно браузера.

То, что вы пытаетесь сделать здесь, может быть достигнуто с помощью 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>