Jak přetáhnout a uchopit obrázky pomocí uživatelského rozhraní JQuery

Ukážeme příklad jak přesouvat obrázky po webové stránce a zachytit ji v div, k tomu použijeme JQuery UI. Budeme používat přetahovatelný Y odhoditelný. Budou použity minimální styly, tento tutoriál si neklade za cíl mít hezké prostředí k testování, ale spíše zjistit, jak fungují komentované funkce. Kód nemá žádnou zásadní komplikaci.

V příkladu budeme mít pár obrázků a div s ohraničením, cílem je přesunout každý obrázek na div a aby to zachytil, uvidíme kódy začínající HTML.

HTML kód

Oceníte, že HTML kód je krátký, přesně to, co je nutné, důležitá část tutoriálu zde není.

 Táhnout  

V sekci hlava importujeme potřebný styl, skript, který vytvoříme, a skripty uživatelského rozhraní JQuery. Do těla jednoduše přidejte 2 obrázky a div, div má id a obrázky se třídou, abychom je mohli zpracovat v našem skriptu.

CSS kód

Jak jsme řekli na začátku, styly nejsou prioritou, budou použity pouze ty, které jsou pro tento úkol nezbytné.

 #frame {šířka: 270px; min-výška: 60px; okraj: auto; ohraničení: 1px plná černá; polstrování: 5px; } .dropped {position: static! important; } 

K div je přidáno ohraničení a je vycentrováno, takže vidíme, kdy zachycuje obraz. Vyřazená třída je statická, tato část je nejdůležitější, protože tato třída bude přidána do obrázku, když ji zachytí div.

JQuery kód

Kód vložíme níže, abychom jej později vysvětlili.

 $ (document) .ready (function () {$ (". moveImage"). draggable (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (" upuštěno "); $ (this) .append (ui.draggable);}});})

Vyrábíme třídu přesunout obrázek draggable, což je třída přidaná k našim obrázkům v HTML. Tento úkol nám již umožňuje přesouvat nebo přetahovat naše obrázky po stránce, ale jen to, s tím kódem by to ještě nebylo „zachyceno“. K tomu použijeme droppable v div s id obrázek, v rámci droppable přimějeme obrázek umístěný v div přidat do spadlé třídy (pamatujte na CSS, bez statické polohy by to nefungovalo dobře) a později se to přidá jako obsah div, k tomu používáme append.

Nyní budeme testovat příklad, na následujícím obrázku vidíme, jak stránka začíná:

Přesunutí obrázku bude vypadat takto:

A nakonec, když máme 2 obrázky v div, „stránka“ bude vypadat takto:

Je třeba poznamenat, že v závislosti na velikosti okna se vzhled mírně liší. Doposud přišel tutoriál, nyní si můžete příklad procvičit a zkomplikovat, jak chcete.

PoznámkaPokud se chcete dozvědět více o uživatelském rozhraní JQuery, navštivte jejich stránku. Najdete více možností a uvidíte příklady.