Dit artikel is een spiegelartikel van machinevertaling, klik hier om naar het oorspronkelijke artikel te gaan.

Architect_Programmer_Code Landbouwnetwerk»Architect › Front-end ontwerp & web › Html/CSS/JavaScript › HTML stelt het div-element in om willekeurig te slepen
Bekijken: 7184|Antwoord: 2

[HTML/HTML5] HTML stelt het div-element in om willekeurig te slepen

[Link kopiëren]
Geplaatst op 26-04-2022 10:32:01 | | | |
Vereisten: HTML-webpagina's hebben een werkbalk waarmee gebruikers naar de gewenste positie kunnen slepen volgens hun gewoonten.

Allereerst zijn de renderings als volgt:



HTML-elementen kunnen willekeurig worden gesleept door de draggable eigenschap op true te zetten, maar het element keert terug naar zijn oorspronkelijke positie wanneer de muis wordt losgelaten.

Je kunt dit doen door een dragend-event toe te voegen om het element na het loslaten van de muis naar de positie te verplaatsen.

Bijgevoegd is de broncode:

Activeer een gebeurtenis op een drag-target (bron-element):

ondragstart - geactiveerd wanneer de gebruiker een element begint te slepen
ondrag - wordt geactiveerd wanneer het element wordt gesleept
ondragend - geactiveerd wanneer de gebruiker het element heeft gesleept

Gebeurtenissen die worden geactiveerd wanneer het doelwit wordt losgelaten:

ondragenter - Activeert dit event wanneer een object dat door de muis wordt gesleept de scope van zijn container binnenkomt
ondragover - Dit evenement wordt geactiveerd wanneer een gesleept object binnen de scope van een andere objectcontainer wordt gesleept
ondragleave - Dit evenement wordt geactiveerd wanneer een object dat door de muis wordt gesleept het bereik van zijn container verlaat
ondrop - Dit evenement wordt geactiveerd wanneer de muistoetsen worden losgelaten tijdens een slepen

Referentie:

Gebruik HTML5 drag-and-drop API's
https://www.itsvse.com/thread-10299-1-1.html




Vorig:Gebruik HTML5 drag-and-drop API's
Volgend:Hoekcomponent geeft nbsp-ruimten terug

Gerelateerde berichten
Geplaatst op 26-04-2022 21:24:22 |
Kom en leer opnieuw.
Geplaatst op 27-04-2022 14:13:06 |
Leer, leer
Disclaimer:
Alle software, programmeermaterialen of artikelen die door Code Farmer Network worden gepubliceerd, zijn uitsluitend bedoeld voor leer- en onderzoeksdoeleinden; De bovenstaande inhoud mag niet worden gebruikt voor commerciële of illegale doeleinden, anders dragen gebruikers alle gevolgen. De informatie op deze site komt van het internet, en auteursrechtconflicten hebben niets met deze site te maken. Je moet bovenstaande inhoud volledig van je computer verwijderen binnen 24 uur na het downloaden. Als je het programma leuk vindt, steun dan de echte software, koop registratie en krijg betere echte diensten. Als er sprake is van een inbreuk, neem dan contact met ons op via e-mail.
Mail To:help@itsvse.com