Малко по-известен изкуство на «плъзгане и пускане» как да се хване и плъзнете обекти

Персонализирана JQuery интерфейси: неизчерпаем източник на беглец

УИС (потребителски интерфейси - UI) - колекция от едно парче разширения, които да помогнат за решаване на най-трайните проблеми. Например, ние може (чрез линията на код), за да установи елемента, за да изберете дата (такива малки календари, които се появяват във формуляра, за да изберете текущата дата или желание), и достатъчно богати функции и опции за настройки.

Днес ние ще се запознаем с методи като плъзгане () и за капки ():

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

* Контейнер (отдясно), която е област, в която ние ще плъзнете обекти.
* Обектите, които не могат да се влачат.
* Обектите, които лесно можем да влачите и пускате в контейнера.
* Drag и капка обект (само хоризонтално), обем на областта е ограничен.
* Drag обекти, които избледнява при плъзгане чиито движение област е ограничена, и които се във времето към контейнера. Както може би сте забелязали, площта на предишното движение на обекта е ограничен, но по-късно ще бъде възможно да се движат дори извън контейнера.

Това, което току-що видяхте - това е, което ние ще направим заедно. Както винаги, ние започваме с развитието на HTML код.

Сега нека да направим тялото на елемента на документ 4 от лявата страна и от дясната страна ще създаде зона за плъзгане и пускане.

Както можете да видите, ние сме създали всички 4 елементи вътре #left_block елемент. Моля, обърнете внимание класове, прилагани към всеки елемент. А клас определя съотношение кутия и други параметри се използват за определяне (това ще бъде показано по-долу) плъзгане.

Сега, нека да се впише в CSS файла в screen.css

В допълнение към центриране съдържанието вътре в контейнера, ние ще публикуваме предмети и ги помолете да минимален дизайн параметри.

Ние ще видим по-късно, който определя навъртам клас.

В заглавната част на документа, трябва да се обадите на JQuery и разширения, които са потребителски интерфейси, съдържащи се в досието на JQuery UI--1.7.2.custom.min.js.

В допълнение, ние ще направим по-рано създаден документ Cascading Style Sheets - screen.css.

Нека да погледнем на документа, който трябва да изглежда по следния начин.

На този етап, страницата трябва да изглежда като в този пример.

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

Как да създадете елемент на «за капки»

Първото нещо, което да направите, е да се създаде блок от дясната страна с площта, която можете да влачите и пускате на обект с помощта на метода за капки ().

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

Сега нека да разгледаме значението на кода:

* В първия ред ние генериране елемент с Id right_block за капки.
* След това ние правим някои настройки на първия елемент, който трябва да се вземат. В нашия случай, стойността на този елемент .droppable, което означава, че отделни елементи за преместване, чрез капки, като вид.
* Втори вариант - hoverClass. Той определя CSS клас трябва да бъдат взети, ако се проточи елемент се намира в зоната. В този случай, на класа, когато курсора на мишката се определя достатъчно точно - тя се променя цвета на фона. Това ни дава да се разбере, че елементът се намира в район, достъпни за плъзгане. А просто показател, който подобрява използваемостта.
* Третият параметър е отговорен за условията, в които трябва да се разглеждат позицията, а в областта на плъзгане и пускане. В момента има 4 варианта:
• Fit: когато целият елемент е в рамките на региона, за да се движат
• курсора: когато курсора на мишката е в района да се движат
• Touch: когато плъзгане елемент идва до границата да се движат
• Пресичане: когато най-малко половината на елемента е в рамките на региона, за да се движат;
* И накрая, стойностите на параметрите отпадат, можем да дефинираме функция, която да бъде изпълнена, когато влачат елемент остава в областта. В тази функция, опцията, която ние сме идентифицирали чрез потребителския интерфейс, ще бъде обект, който ще ни позволи да управлява и да имат достъп до бърка елемент, или към която и двамата може поне обжалване от ui.draggable. Ние просто се ограничаваме да замени сценария, съдържаща се в елемента.

низ с код показва по-горе: Само преместите елемент намерете етикет «р» и да се замени съдържанието на маркер за скриптове «спадна!».

Как да създадете елементи на «плъзгане»

С цел да се генерира съответните възможности обект, ние не трябва да правите нищо, освен използване на метод с възможност за преместване (), която току-що обсъжда. По това време ние започваме с плъзгане () метод за прилагане с елемента «плъзгане» клас (втори елемент):

Ако се опитате да използвате скрипта, ще забележите, че този елемент е станал плъзгане (или плъзгане), а сега можете да го поставите навсякъде. Но нищо не се случва, ако не го преместите в една област, която сме създали за движещи се обекти. Защо се случва това?

Открихме, че само елементи за капки клас може да бъде преместен и фиксирани в областта.

Как да създадете плъзгане-обект с движението, ограничен от един ред?

Нека да разгледаме и трети елемент.

Отново ще трябва да се създаде обект с параметър плъзгане, но към тях се прибавят на параметъра изместване на оста X. Това означава, че активният елемент може да бъде Разбъркване само в хоризонтална посока. Ние не трябва да добавите тази настройка, правили сме го сега само за да ви покажа колко е лесно да се направи.

Ако можем да прехвърли този елемент в зоната за преместване, ние можем да видим, че промените цвета на фона и ако го оставите на терена, създадена, за да преместите елементите, ще видим, че сценарият е променен, което показва, че това събитие нещо, за да се предотврати ,

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

Но какво, ако ние трябва да се, така че елемент е свързана с конкретно контейнер?

Как да плъзнете даден елемент и да го коригираме в контейнера след отпускане на бутона?

Трябва да добавим този параметър към последния елемент:

Поставили сме на нивото на прозрачност на параметъра 0.5. Това означава, че когато движещ се обект се замъгли. Дори и в този случай, този параметър се използва за визуално преживяване.

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

Ето и пълния функция:

В тази статия, ние ви казах за основа на технология, която ни позволява да добавите някои динамика в интерфейса на уеб сайт. Често върху движението на елементите, използвани за създаване на администраторския панел в различни двигатели, където всичко може да бъде преместен, изтрити или преместени в друга част и така нататък.

От друга страна, основната заявлението за тази технология е в кошницата (кошницата) онлайн магазини. В него можете да видите ясен пример за прилагането на тази технология.