Selektory#

Pseudokalsa przeciągania i upuszczania (wariant funkcyjny)#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:drop([active|valid|invalid]) { /* deklaracje */ }

Pseudoklasa :drop() reprezentuje elementy, które są celami upuszczenia ze specyficznymi cechami, jak określono w języku gospodarza, w chwili kiedy użytkownik wykonuje "przeciąganie" lub koncepcyjnie inne przenoszenie elementu do celu upuszczenia. Dla przykładu, HTML5 definiuje atrybut dropzone wskazujący, że dany element może być celem upuszczenia.

Funkcyjna pseudoklasa :drop() jest identyczna z pseudoklasą :drop, z tym że wprowadza dodatkowe filtry, które mogą wykluczyć niektóre cele upuszczenia. Dokładna składnia użycia pseudoklasy wygląda następująco:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:drop( [ active || valid || invalid ]? )

Poszczególne słowa kluczowe mają następujące znaczenie:

active

Cel upuszczenia jest aktualnym celem upuszczenia dla operacji przeciągania. Oznacza to, że jeżeli użytkownik rozpoczął przeciąganie, to zostałoby ono upuszczone dla tego celu upuszczenia.

valid

Jeśli język gospodarza posiada koncepcję prawidłowych (valid) lub nieprawidłowych (invalid) celów upuszczenia, to wartość ta pasuje tylko wtedy, kiedy cel upuszczenia jest prawidłowym dla aktualnie przeciąganych obiektów. W przeciwnym razie wybierane są wszystkie cele upuszczenia.

Dla przykładu, HTML-owy atrybut dropzone pozwala sprecyzować cel zdarzenia, tak aby akceptował jedynie łańcuchy znakowe lub pliki, które są określonego typu.

invalid

Jeśli język gospodarza posiada koncepcję prawidłowych (valid) lub nieprawidłowych (invalid) celów upuszczenia, to wartość ta pasuje tylko wtedy, kiedy cel upuszczenia jest nieprawidłowym dla aktualnie przeciąganych obiektów. W przeciwnym razie żaden cel upuszczenia nie zostanie wybrany.

Wewnątrz argumentu pseudoklasy :drop() dozwolone są kombinacje wielu słów kluczowych (kolejność nieistotna), i w takie sytuacji wybierane są tylko te cele upuszczenia, które spełniają wymagania wszystkich słów kluczowych. Selektor :drop(valid active) pasuje do aktywnego celu upuszczenia, jeśli jest prawidłowy, ale nie w sytuacji, kiedy jest nieprawidłowy.

W przypadku braku przekazania któregokolwiek z prawidłowych słów kluczowych w argumencie pseudoklasy :drop() otrzymujemy identyczne działanie, jak w niefunkcyjnym wariancie :drop - czyli wybierany jest każdy cel upuszczenia.

Warto przypomnieć, że statyczne dopasowanie elementów (bez interakcji użytkownika), można wykonać chociażby za pomocą selektorów atrybutów.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<style>

		[draggable] {background-color: white;}

		:drop() {border: 10px solid black;}	/* wszystkie cele upuszczenia (to samo co :drop) */
		#p1:drop(active) {background-color: red;}
		#p2:drop(active) {background-color: green;}
		#p3:drop(active) {background-color: blue;}

	</style>

</head>

<body>

	<p draggable="true">Akapit z możliwością przeciągania - uchwyć go lewym przyciskiem myszki i spróbuj przeciągnąć do wnętrza poniższych akapitów.</p>

	<p id="p1"dropzone="copy">Akapit będący celem upuszczenia (powinien mieć czerwone tło w trakcie przeciągania).</p>

	<p id="p2" dropzone="copy">Akapit będący celem upuszczenia (powinien mieć zielone tło w trakcie przeciągania).</p>

	<p id="p3" dropdropzone="copy" zone>Akapit będący celem upuszczenia (powinien mieć niebieskie tło w trakcie przeciągania).</p>

</body>

</html>

Na chwilę obecną żadna aktualna przeglądarka nie obsługuje pseudoklasy :drop().

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa przeciągania i upuszczania (wariant funkcyjny) (H2) Specyfikacje i inne materiały (H3)