Come creare elementi di trascinamento con vaniglia javascript e html

HTML e JavaScript possono essere combinati per creare animazioni ed effetti sorprendenti e accattivanti sulla pagina web. Ci sono milioni di siti Web disponibili su Internet e non vuoi che il tuo sito Web venga dimenticato in mezzo a questi siti Web. Uno degli effetti più semplici che puoi dare a un elemento su una pagina web è l'effetto trascinamento. Per spostare e posizionare un elemento in qualsiasi punto della pagina web. In questo post, ti mostreremo come rendere un elemento trascinabile e droppable sulla pagina web.

Elemento trascinabile e droppable con html e javascript

Crea un nuovo elemento HTML e all'interno del tag del corpo del file HTML, crea un nuovo elemento Div con le seguenti righe di codice:

Trascinami e lasciami cadere

Questo creerà la seguente pagina Web:

Per modellare un po 'questo elemento, scrivi il seguente codice al di fuori del etichetta:

Modificando questo stile ottieni il seguente output sulla pagina web:

Per il codice script, crea un nuovo tag script , il javascript saremo inseriti all'interno di questo tag script. Per la parte JavaScript, creeremo prima un nuovo var che in seguito utilizzerà il riferimento dell'elemento per modificare la sua posizione sulla pagina web:

var dragvalue;

Successivamente, creeremo una funzione denominata mossa() che useremo per spostare l'elemento. La prima cosa che faremo all'interno di questa funzione di mossa è ottenere il riferimento del nostro elemento all'interno di una variabile con la seguente riga di codice:

var element = document.getElementById ("Drageling");

Non che abbiamo il nostro riferimento, imposteremo la posizione di questo elemento in assoluto. Dato che stiamo spostando l'elemento con la nostra scelta, vogliamo posizionarlo esattamente dove vogliamo, non rispetto ad un altro elemento:

elemento.stile.posizione = "assoluto";

Quando facciamo clic su questo elemento, vogliamo passare il riferimento del nostro elemento al "DragValue" variabile in modo da poter manipolare la sua posizione:

elemento.onMouseDown = function ()
dragValue = elemento;
;

Ora che abbiamo il riferimento del nostro elemento memorizzato nel dragvalue Variabile, ora lo posizioneremo nella posizione del mouse utilizzando le seguenti righe di codice:

documento.onMouseMove = function (e)
var x = e.Pagex;
var y = e.Pagey;
dragvalue.stile.a sinistra = x + "px";
dragvalue.stile.top = y + "px";
;

Quando rilasciamo il pulsante del mouse, vogliamo rimuovere il riferimento del nostro elemento dal “Dragvalue"Variabile:

elemento.onmouseup = function ()
dragValue = null;
;

L'ultimo passo è invocare questo mossa() funzione con la seguente riga di codice:

mossa();

Il codice di script completo sarà:

Salva il file ed esegui l'HTML e otterrai il seguente risultato sul browser:

E il gioco è fatto; hai fatto un elemento di trascinamento in vaniglia javascript

Conclusione

Uno degli effetti più semplici che è possibile creare utilizzando la vaniglia JavaScript insieme a HTML è l'elemento trascinabile e droppable sulla tua pagina web. Tra il mezzo di milioni di siti Web, vuoi che la tua pagina web si distingua. Per questo, la pagina web deve essere super attraente e interattiva. Esistono diversi modi per fare un effetto o un'animazione particolare grazie alla quantità sempre crescente di librerie JavaScript. Ma oggi ci siamo concentrati sulla creazione di qualcosa di interattivo usando Vanilla JavaScript.