Selektory#

Pseudokalsa przeciągania i upuszczania (wariant niefunkcyjny)#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:drop { /* deklaracje */ }

Pseudoklasa :drop reprezentuje elementy, które są celami upuszczenia, 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.

W przypadku większych wymagań filtrujących, gdzie istotne jest wykluczenie niektórych celów upuszczenia, należy skorzystać z pseudoklasy :drop().

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;}

		#p1:drop {background-color: red;}
		#p2:drop {background-color: green;}
		#p3:drop {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 niefunkcyjny) (H2) Specyfikacje i inne materiały (H3)