¿Hay una pseudoclase CSS “: drop-hover”?

Al fin después de mucho luchar ya hallamos la solución de esta duda que agunos lectores de nuestro sitio web presentan. Si quieres aportar algo no dudes en compartir tu información.

Solución:

ACTUALIZACIÓN: gracias al comentario de @Renato, de acuerdo con https://github.com/w3c/csswg-drafts/issues/2257, la pseudoclase de eliminación se eliminó ahora.

---

Hay :drop y :drop() pseudo-clase, que actualmente se encuentra en estado de Borrador de trabajo.

Según http://css4.rocks/selectors-level-4/drag-and-drop-pseudo-class.php, el soporte del navegador no es bueno.

Para el caso “el archivo que se está descartando no se acepta”, :drop(invalid active) se espera que funcione, en el futuro.

Tuve la misma pregunta y la resolví de manera un poco diferente a nashcheez. Sin embargo, todavía uso JavaScript (utilicé jQuery aquí para simplificar las cosas):

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;

Drag Me

Drop Here

Probé esto en Safari, Firefox y Chrome, pero no probé IE. Probablemente estoy rompiendo una regla con la costumbre attribute, pero parece funcionar mientras espero CSS4.

No hay absolutamente ningún css puro multi-navegador solución actualmente para cambiar las propiedades de los elementos al arrastrar y soltar elementos en la ventana del navegador.

Lo que está tratando de hacer aquí se puede lograr mediante Javascript/jQuery usando un contenedor oculto y mostrándolo solo cuando el objeto está dentro del contenedor que se puede arrastrar.

Hay esta demostración que había guardado anteriormente si desea echar un vistazo a:

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 + '">nne.dataTransfer.types is ' + e.dataTransfer.types + 'nne.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 + '">nne.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;

  
drag files onto this page
  
-> drop here <-
  
and stuff will happen

Puedes añadir valor a nuestro contenido cooperando tu veteranía en las interpretaciones.

---

---

Utiliza Nuestro Buscador