Существует ли псевдокласс класса CSS: "drop-hover"?

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

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

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

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

Ответы

Ответ 1

ОБНОВЛЕНИЕ: Благодаря комментарию @Renato, согласно https://github.com/w3c/csswg-drafts/issues/2257, псевдокласс drop теперь исключен.

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

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

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

Ответ 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>

Ответ 3

В настоящее время нет абсолютно чистого кросс-браузерного решения 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>