Създаване на прост html5 "плъзгане - капка" интерфейс
LPgenerator - Професионална целевата страница платформа за увеличаване на продажбите на Вашия бизнес
Кацане МАГАЗИН ОБУЧЕНИЕ ЗА ДЕЙСТВИЕ от страна на партньорите
В момента HTML5 плъзгане капка се поддържа от всички основни браузъри за настолни компютри (включително и IE (дори и в IE 5.5 има частична поддръжка)), но не се поддържа от някои от най-популярните мобилни браузъри.
- dragStart: задейства, когато потребителят започва да влачите и пускате;
- dragEnter: задейства, когато съответните възможности елемент е първият довлече елемента цел;
- dragOver: пожари, когато мишката се премества върху елемент, когато съпротивление;
- dragLeave: се задейства, когато потребителят напусне на мишката върху даден елемент, когато плъзнете;
- съпротивление: влиза в действие всеки път, когато се движи мишката, докато плъзгате ни елемент;
- капка: започва, когато извършващи действителния спад;
- dragEnd: задейства, когато потребителят освободи бутона на мишката, докато плъзгате обекта.
С всички тези слушатели събитие, имате добър контрол над това как ще работи на интерфейса.
Това е мястото, където се случва магията всички dragdrop. Този обект съдържа данни, които е изпратена операция плъзгане. Данните могат да бъдат монтирани и получени по различни начини, най-важните от които са:
Създаване dragdrop пример
Сега ще започнем да се създаде един прост пример dragdrop. Както можете да видите, ние имаме две divs малък и един голям, ние можем да плъзнете малки диви в голям, и дори да ги върнете обратно.
Първото нещо, което трябва да направите е да създаде HTML. Ние правим Разделения плъзгане с помощта на плъзгане атрибут:
В този код, трябва първо да обяви какъв тип ефект за да се позволи на операцията и да го настроите в движение. Във втория ред, ние се данните за където текстът ще бъде стойността на текст и идентификационен номер на елемента, които ние се проточат. След това, ние използваме setDragImage метод, който определя, че ние ще се проточи, а след това, когато ще курсора при плъзгане, както и блокове от 200 на 200 пиксела, ние го постави в центъра на града. В крайна сметка, ние се върне върне вярно.
За да пуснете елемент се, той трябва да слушате 3 различни събития: dragEnter, dragOver и падащи събития. Така че нека да го добавим към HTML5 в DIV с идентификационния номер на голям (голяма):
След като добавите слушателите на събитието, трябва да създадем тези функции. Нека започнем с dragEnter dragOver и събития:
Първата функция ние определяме какво трябва да се случи, когато един елемент, който ние плъзнете за да достигне желаната елемент, който трябва да се появи капка, в този случай ние не позволява само поведението по подразбиране на браузъра. На следващо място, в зависимост dragOver, ние просто не приемат, че е налице спад по подразбиране.
В следващата част, ние определяме функция, когато елементът е "хвърлен" на желаната цел:
В тази последна част, ние първо ще определи променливите данни, при които получаваме всички данни, която е достъпна за текстов формат, а след това се добавят данните на DIV, където е необходимо, за да "падне" на елемента.
Направи раздел спад цел
Демото показва, че двете DIV могат да се местят обратно на мястото си. За щастие, добавяйки още един гол спад, много по-лесно, отколкото си мислите. Поради тези функции, вече имаме всичко, което трябва да направите е да добавите слушателите на събития:
И това е всичко, което е необходимо, за да се позволи на плъзгане Разделение на мястото си.
LPgenerator - Професионална целевата страница платформа за увеличаване на продажбите на Вашия бизнес
ВНИМАНИЕ! Използвате остарял браузър Internet Explorer
Този сайт е изграден върху най-напредналите и модерни технологии и не поддържа Internet Explorer втората и седмата версия.
