Jak tworzyć elementy przeciągnięcia i upuszczenia za pomocą waniliowego JavaScript i HTML

HTML i JavaScript można połączyć, aby stworzyć niesamowite i przyciągające wzrok animacje i efekty na stronie internetowej. W Internecie są miliony witryn i nie chcesz, aby Twoja witryna została zapomniana pośród tych stron internetowych. Jednym z najprostszych efektów, które możesz podać elementowi na stronie internetowej, jest efekt przeciągania i upuszczenia. Poruszać się i umieścić przedmiot do dowolnego punktu na stronie internetowej. W tym poście pokażemy Ci, jak uczynić element przeciągny i odrzucany na stronie internetowej.

Element przeciągający i odrzucany z HTML i JavaScript

Utwórz nowy element HTML i wewnątrz znacznika ciała pliku HTML, utwórz nowy element DIV z następującymi wierszami kodu:

Przeciągnij mnie i upuść

To stworzy następującą stronę internetową:

Aby nieco stylizować ten element, napisz następujący kod poza etykietka:

Zmieniając ten styl, otrzymujesz następujące dane wyjściowe na stronie:

Dla kodu skryptu utwórz nowy Tag skryptu , JavaScript zostaniemy umieszczone w tym znaczniku skryptu. W części JavaScript najpierw stworzymy nowy var To później wykorzysta odniesienie elementu do zmiany jego pozycji na stronie internetowej:

var dragValue;

Następnie utworzymy funkcję o nazwie przenosić() że będziemy używać do przeniesienia elementu. Pierwszą rzeczą, którą zamierzamy zrobić w tej funkcji ruchu, jest uzyskanie odniesienia naszego elementu wewnątrz zmiennej z następującym wierszem kodu:

var element = dokument.getElementById („Dragelement”);

Nie dlatego, że mamy odniesienie, ustalimy pozycję tego elementu na absolutne. Gdy poruszamy element z naszym wyborem, chcemy go umieścić dokładnie tam, gdzie chcemy, nie w stosunku do innego elementu:

element.styl.pozycja = „Absolute”;

Po kliknięciu tego elementu chcemy przekazać odniesienie naszego elementu do „DragValue” zmienna, abyśmy mogli manipulować jej pozycją:

element.onMousedown = function ()
DragValue = element;
;

Teraz mamy odniesienie do naszego elementu przechowywanego w DragValue Zmienne, teraz umieścimy go w miejscu myszy za pomocą następujących wierszy kodu:

dokument.onMousEmove = funkcja (e)
var x = e.pagex;
var y = e.pagey;
DragValue.styl.lewy = x + „px”;
DragValue.styl.top = y + „px”;
;

Po zwolnieniu przycisku myszy chcemy usunąć odniesienie naszego elementu z „DragValue" zmienny:

element.onMouseUp = function ()
DragValue = null;
;

Ostatnim krokiem jest wywołanie tego przenosić() Funkcja z następującym wierszem kodu:

przenosić();

Pełny kod skryptu będzie:

Zapisz plik i wykonaj HTML, a otrzymasz następujący wynik w przeglądarce:

I tam masz; Zrobiłeś element przeciągania i upuszczenia w waniliowym JavaScript

Wniosek

Jednym z najprostszych efektów, które możesz stworzyć za pomocą waniliowego JavaScript wraz z HTML, jest przeciągny i upuszczalny element na Twojej stronie internetowej. Wśród milionów stron internetowych chcesz wyróżniać się Twoja strona internetowa. W tym celu strona musi być bardzo atrakcyjna i interaktywna. Istnieje wiele sposobów robienia jednego konkretnego efektu lub animacji dzięki stale rosnącemu ilościom bibliotek JavaScript. Ale dziś skupiliśmy się na tworzeniu czegoś interaktywnego za pomocą waniliowego JavaScript.