CSS futuro: :arrastrar (y tal vez ::draged-image?)

Ahora sé lo que estás pensando. Otra pseudoclase de CSS… pero creo esta sugerencia Es más fresco.

A principios de este año se propuso agregar una nueva pseudoclase, :dragque permitirá a los desarrolladores aplicar estilos cuando el usuario arrastre activamente un elemento. Actualmente, CSS carece de un mecanismo para detectar interacciones de arrastre, lo que dificulta la gestión del comportamiento de la interfaz de usuario que depende de esta operación sin depender de JavaScript.

¡Sin JavaScript! Me gusta tener una pseudoclase dedicada a la función en lugar de pasar classList.toggle() ruta.

¿Pero cómo funcionará esto?

Para entender primero hay que saber API HTML de arrastrar y soltar. Alguno el evento que desencadena incluir:

• drag (Se dispara cada pocos milisegundos al arrastrar un elemento),
• dragstart (el evento se activa en el arrastre inicial), y
• dragend (Evento que se activa cuando se detiene el elemento de arrastre).

Echemos un vistazo rápido a cómo funcionan estos eventos de arrastrar y soltar en JavaScript para comprender cómo se traducen en CSS. Digamos que tenemos siete elementos de botón. <div> :

<menu class="menu-bar">
  <li><button>Home</button></li>
  <li><button>Products</button></li>
  <li><button>Services</button></li>
  <li><button>About</button></li>
  <li><button>Contact</button></li>
  <li><button>Blog</button></li>
  <li><button>Careers</button></li>
</div>

podemos hacer el todo .menu-bar Arrastre colocando una propiedad sobre él:

<menu class="menu-bar" draggable="true">
  <!-- etc. -->
</div>

Para nuestro CSS simplemente damos is-dragging Clasifique algunos estilos que solo se aplican cuando el elemento se arrastra o mueve:

En CSS podemos establecer un .is-dragging Usaremos JavaScript para configurar esta clase en el elemento mientras está en proceso de ser arrastrado. Estos son los estilos que aplicamos al elemento cuando esto sucede:

.is-dragging {
  box-shadow: 0 4px 12px rgba(0 0 0 / 0.15);
  background: #fff;
  transform: translate(1px);
  opacity: 0.2;
  scale: 1.2;
}

A continuación se muestra el JavaScript que cambia entre el inicio y el final del arrastre del mouse. escucha por un dragstar evento y agregar .is-dragging clase a .menu-bar. cuando lo dejamos ir .menu-barla diversión de arrastrar se detiene, .is-dragging Se elimina la clase:

menuBar.addEventListener("dragstart", (event) => {
  event.target.classList.add("is-dragging");
});

menuBar.addEventListener("dragend", (event) => {
  event.target.classList.remove("is-dragging");
});

Nuestra salida se ve así. Arrastre el elemento desplegable para ver:

¡bien! Cuando se arrastra la barra de menú, conserva su propia imagen en su posición original, a la que se le aplica el estilo .is-dragging clase. Si bien definitivamente podemos resolver este problema con JavaScript, ¿qué tan bueno sería sugerir esto? :drag Pseudoclase para abstraer todo el contenido del script:

.menu-bar:drag {
  cursor: grabbing;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #fff;
  transform: translate(1px);
  opacity: 0.2;
  scale: 1.2;
}

¡Rendimiento +1! +1 ¡Una dependencia menos! ¡+1 por mantenibilidad!

¿Qué tal la vista previa?

¿Sabías que podemos diseñar el elemento real mientras lo arrastramos por la pantalla? esto es lo que se llama imagen de vista previa Podemos reemplazarlo con <div> Podemos agregar estilos personalizados.

Solo usa más JavaScript dataTransfer.setDragImage() Función:

const dragPreview = document.createElement("div");

dragPreview.textContent = "📦 Dragging...";
dragPreview.style.cssText = `
  background: #fff6d6;
  border: 2px dashed orange;
  border-radius: 0.5rem;
  color: #333;
  padding: 0.5rem 1rem;
`;

document.body.appendChild(dragPreview);

// This replaces the default drag preview
event.dataTransfer.setDragImage(dragPreview, 0, 0);

// Remove after the event fires
setTimeout(() => dragPreview.remove(), 0);

Aquí me atreveré a sugerir otro Pseudo CSS específicamente para esto ::drag-image. Imagine poder evitar todo JavaScript y escribir estilos directamente en CSS:

::drag-image {
  content: "📦 Dragging...";
  padding: 0.5rem 1rem;
  background: #fff6d6;
  color: #333;
  border: 2px dashed orange;
  border-radius: 0.5rem;
}

Pensé que podría ser una pseudoclase, pero parece que el pseudoelemento tiene más sentido ya que estamos hablando de un objeto específico en lugar de un estado.

Abrí un problema para esto – Si lo encuentras conveniente, por favor dale me gusta. ::drag-image Pseudoelementos como este. CSSWG es Ya programado para discusión este :drag propuesta. Si esto está incluido en la especificación, también impulsaré los pseudoelementos.

¿idea?

¿Sí o no para las variables ficticias relacionadas con el arrastre? ¿Probarías algo similar? ¿O crees que JavaScript es demasiado?