Jak przeciągać i pobierać obrazy za pomocą interfejsu użytkownika JQuery

Pokażemy przykład jak przesuwać obrazy po stronie internetowej i je łapać w div, w tym celu użyjemy interfejsu użytkownika JQuery. Użyjemy przeciągany Tak upuszczalny. Zostaną użyte minimalne style, celem tego samouczka nie jest stworzenie przyjemnego środowiska do testowania, ale raczej sprawdzenie, jak działają komentowane funkcje. Kod nie ma większych komplikacji.

W tym przykładzie będziemy mieć kilka obrazów i div z obramowaniem, celem jest przeniesienie każdego obrazu do div i aby go przechwycił, zobaczymy kody zaczynające się od kodu HTML.

Kod HTML

Z pewnością docenisz, że kod HTML jest krótki, tylko to, co jest konieczne, nie znajdziesz tutaj ważnej części samouczka.

 Ciągnąć  

W sekcji head importujemy niezbędny styl, tworzony przez nas skrypt oraz skrypty JQuery UI. W ciele po prostu dodaj 2 obrazki i div, div ma identyfikator, a obrazki z klasą, abyśmy mogli obsłużyć je w naszym skrypcie.

Kod CSS

Jak powiedzieliśmy na początku, style nie są priorytetem, zostaną użyte tylko te niezbędne do tego zadania.

 #ramka {szerokość: 270px; min-wysokość: 60px; margines: auto; obramowanie: 1px jednolita czerń; wypełnienie: 5px; } .dropped {pozycja: statyczna! ważne; } 

Do elementu div dodawana jest ramka i jest wyśrodkowana, dzięki czemu możemy zobaczyć, kiedy przechwytuje obraz. Upuszczona klasa jest statyczna, ta część jest najważniejsza, ponieważ ta klasa zostanie dodana do obrazu, gdy zostanie złapana przez div.

Kod JQuery

Poniżej umieścimy kod, aby później go wyjaśnić.

 $ (dokument) .ready (function () {$ (. moveImage"). przeciągany (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (" porzucone "); $ (this) .append (ui.draggable);}});})

Tworzymy klasę przenieś obraz draggable, czyli klasa dodawana do naszych obrazów w kodzie HTML. To zadanie już pozwala nam przesuwać lub przeciągać nasze obrazy po stronie, ale tylko to, z tym kodem nie zostałyby jeszcze „przechwycone”. W tym celu użyjemy droppable w div z id zdjęcie, w ramach droppable sprawiamy, że obraz znajdujący się w div dodajemy do upuszczonej klasy (pamiętaj o CSS, bez pozycji statycznej nie działałby dobrze), a później jest dodawany jako zawartość div, do tego używamy append.

Teraz przetestujemy przykład, na poniższym obrazku widzimy, jak zaczyna się strona:

Przenoszenie obrazu będzie wyglądać tak:

I na koniec, gdy mamy 2 obrazy w div, „strona” będzie wyglądać tak:

Należy zauważyć, że w zależności od wielkości okna wygląd będzie się nieznacznie różnić. Do tej pory pojawił się samouczek, teraz możesz ćwiczyć i komplikować przykład tak bardzo, jak chcesz.

NotatkaJeśli chcesz dowiedzieć się więcej o JQuery UI odwiedź ich stronę. Znajdziesz więcej możliwości i zobaczysz przykłady.