В продължение на много години ние използваме, за да се опрости сложните елементи от потребителския интерфейс, като анимации, заоблени ъгли и плъзгане, библиотеки JQuery и Доджо. Безспорно е, че външния вид е важно да се създадат качествени уеб сайтове, но защо библиотека за общи задачи, че всички разработчици използват?

функции за откриване на

Много приложения, които използват плъзгане и пускане, не може без него. Представете си какво ще трябва да се мисли за игра на шах, не е в състояние да се движи парчета. Въпреки пълна поддръжка на браузъра, за да се определи дали тя се изпълнява влачене и пускане (или други функции на HTML5, за извършване на една и съща задача), е необходимо да се осигури решение, което може да намали качеството на енергията. Ако плъзнете и капка функция не е налична, операциите по прилагане може да се реализира чрез свързване на библиотеката.

Ако се нуждаете от API, вместо определяне браузъра параметър User-Agent използване откриване функция. Един от най-добрите библиотеки за откриване функция се нарича Modernizr. За всеки проверен функция Modernizr задава булева стойност. Резултатът е много кратък код за проверка за наличие на плъзгане и пускане:

Създаване на плъзгане съдържание

Направете обект плъзгане е много лесно: той използва атрибут плъзгане = вярно. Плъзгането може да включва почти всеки елемент в т. Н. изображения, връзки, файлове и дори DOM възел.

Като пример, започнете създавайки пренареждате колони. Основна таг може да изглежда така:

Трябва да се отбележи, че в повечето браузъри, текстови селекции, образи и елементи на автомати с HREF атрибут се поддържа по подразбиране. Например, има изображение призрак, когато плъзнете логото на google.com уебсайт:

Повечето браузъри поддържат плъзгане изображение по подразбиране.

Използването на CSS3 маркиране може да се представи под формата на колони. С добавянето на курсора на атрибут: движат потребителите получават визуален индикатор елемент на мобилност:

Резултати (плъзгане, но не правят нищо):

В примера по-горе, повечето браузъри ще създаде образ призрак на влачат съдържание. Друго (по-специално FF) по време на операция плъзгане изисква изпращане на данни. В следващия раздел ще направим колона например по-интересно, като добавите слушателите да обработват модела на плъзгане събитие.

Вслушайте се влачат събития

Да контролират процеса, можете да използвате плъзгане и пускане на поредица от събития:

1. Като се започне, за да влачите

След определяне на съдържанието атрибут плъзгане = "истинска". добави товарачи dragstart събития. която ще се изпълнява последователност от плъзгане и пускане за всяка колона.

Веднага след като потребителят започва да плъзнете колоната, този код ще намали непрозрачността на 40%:

Тъй като събитието dragstart е нашият източник елемент, задаване на стойности за this.style.opacity 40% атрибут позволява на потребителя да види движението на избрания елемент. Ние просто трябва да върне 100 процента непрозрачност колона след плъзгане. За да се реши този проблем, събитие dragend. Детайли ние ще го разгледат по-късно.

2. dragenter, dragover и dragleave

За да създадете допълнителни визуални знаци по време на плъзгане и пускане манипулатори да използвате dragenter събития. dragover и dragleave. Например, ако се проточи обекта е над колоната, последната граница става осеян. Това ще покаже на потребителите, че колоните могат да бъдат обект на плъзгане.

В този код, заслужава да се отбележи няколко точки.

3. Приключване на плъзгане

Нашата колона например няма да може да разчита на спад събития. но първо трябва нещо да се промени, премахване на "над" клас от всяка колона с помощта на събития dragend:

Ако сте гледали внимателно за известно време, ще забележите, че влачене и пускане колоните все още не работят в нашия пример, както би трябвало. Представяме DataTransfer обект.

DataTransfer обект

DataTransfer имот - това е мястото, където се осъществява плъзгане. Съдържа част от данните, изпратени по време на тази стъпка. Обект dataTransfer настроен да dragstart събитие. и прочетете и обработени в случай на спад. Когато се обаждате функция e.dataTransfer.setData (формат, данни) съдържание на обекта се определя MIME-тип, както и полезни данни се предават като аргументи.

В нашия пример, полезният товар изпълни действителното колоната HTML код източник:

Удобно, обектът dataTransfer има също функция getData (формат). което позволява да достави данните, които се влачат от MIME-тип. Тук е модифициран процес се проточи колоната:

За удобство при преместване колони добавих глобална променлива dragSrcEl. В handleDragStart () функция елемент съхранява в него innerHTML източник колона. Впоследствие, се чете в handleDrop (). промяна на HTML-кода на колоните на източника и целеви.

свойства плъзгане

DataTransfer обект има свойства, които създават представите визуално на потребителя по време на плъзгане. Те могат също така да се използва за контролиране на реакцията на всяка целева капка за специфичен тип данни.

Резултати (Google логото, за да се покаже, докато местите тези колони):

Хванете и преместете файловете

С API, можете да влачите и пускате влачене и пускане на файлове от компютъра към уеб приложението, отворете прозореца на браузъра. В допълнение, Google Chrome ви позволява да влачите и пускате обекти от прозореца на браузъра на файлове върху работния плот.

Плъзгане и пускане на работния плот в браузъра

файл плъзгане и пускане от работния плот се извършва чрез плъзгане и пускане събития, както и за други видове съдържание. Основната разлика е в спад на събитието манипулатор. Вместо да използва обектът dataTransfer.getData (), за да получите достъп до файлове с данни са поставени в dataTransfer.files имот:

Плъзгане и пускане от браузъра на работния плот

Пълно ръководство за влачене на файлове от браузъра, за да десктопа, вижте статията Хващайте и премествайте файлове като Gmail сайта на CSS нинджа.

Тук е окончателния вариант с подобрена визия и движения на борсата:

В този пример, колоните Интересно е, че всеки един от тях е едновременно обект на източника и целта на плъзгане. В повечето случаи, елементи източник и приемник, са различни. Вижте пример: html5demos.com/drag.

заключение

HTML5 плъзгане и пускане модел е по-сложна, отколкото в други решения, като JQuery интерфейс. Все пак, ако имате възможност да използвате API вграден браузър, той трябва да се използва. В крайна сметка, това е същността на HTML5: стандартизира и да предостави пълен набор от самостоятелността браузър. Надяваме се, че с течение на времето, популярни библиотеки, които използват влачите и пускате функция е активирана по подразбиране, поддръжка на HTML5 и възможност за различни начини за персонализиране на JS-решение.

Хареса тази статия? Хвани RSS емисия и да остане в крак с времето.

Освен изрично. съдържанието на тази страница е лицензирано съгласно 3.0 лиценза Creative Commons Attribution. и примерен код са лицензирани под лиценза Apache 2.0.