Обикновено плъзгане елемент с JQuery
Има моменти, когато може да се наложи да се създаде плъзгане елемент в рамките на вашия уеб приложение. Това е една голяма функционалност, обаче, може да искате да остане елемент на новото място, след плъзгане. В днешната статия ще научите как можете лесно да влачите и приложете на ново място на елемент, дори и след презареждане на страницата, като използвате за улавянето и съхраняването на неговата X и Y координати.
Така че, има елемент на страницата. Можете да го плъзнете напред-назад. Но когато страницата се презарежда, елементът се връща в първоначалното си положение. Въпреки, че имаме нужда от елемента се влачат, както и необходимостта да се гарантира, че наш член е достатъчно, за да плъзнете веднъж. Нека да разгледаме по-просто решение, което изпълнява тази функция.
HTML и CSS
Нека да започнем с HTML-маркиране и стилове за нашия пример. На първо място, CSS:
CSS - много проста. Задаваме HTML тяло и нулеви имоти за почистване на вътрешно и външно отстъп наричан зададена стойност на височината, ширината и други имоти за нашите елементи. - Моз гранично-радиус и -webkit гранично-радиус - две качества, които ни позволяват да се създаде заоблени ъгли (работи досега само в Mozilla Firefox и Safari 3) за нашите членове. Сега, нека да погледнем на HTML код:
Сега най-забавната част! Първо, нека да разгледаме основните функции, които ще използвате, за да се прилагат някои ефекти на нашите елементи. Нека всички на земята.
В рамките на този фрагмент, което наричаме, боравене със събития mousemove и да му кажа: "Когато мишката се премества, задайте на променливата COORD, равна на стойността на текущата позиция на нашия блок #element» Тогава ние получаваме последната част в блок # ( "р: последен") и печат на текст, генериране на стойности собственост ляво (х) и горния (у) на нашето член, спрямо обекта родител (което е блок #glassbox).
Е, тук е по-сложно. В този пасаж ние ще направим един куп неща. На първо място, ние се празен масив, и след това да получите някаква стойност за пълнене му. Като се обадите .mouseup () манипулатор събитие ние каже на браузъра, за да следите на събитието, когато отпуснете бутона на мишката. Ние казваме, че променливото coords - празен масив, след което задайте стойността си равен с позицията на нашето #element блок.
След това, ние трябва да се създаде списък с две линии, които са coordTop: и coordLeft. съответните позиции на ляво и отгоре. нашия блок. С coords.push ред (т). ние ще попълни списъка на масива на координати. Ние променливият ред като нов списък, в който coords ключ ще бъде да съответства на нашата coords масив. Сега малко на Аякс.
$ .post - това е AJAX заявка манипулатор, който я зарежда дистанционно страница, чрез използване на метода на HTTP POST. Тази функция може да отнеме следните параметри: URL адрес, датата и вида на получените данни, за да се върне. В този пример, ние уточни updatecoords.php файл, тъй като нашата URL, защото това е, което файловете, които искаме да изпратим нашите данни. След това, ние се опише вида на данните, като се включат функции $ .toJSON. специфичен плъгин JSON и назначен променлива ред. като данните, които трябва да се върне .toJSON.
Поставете кода по-долу HTML, веднага след затваряне на тялото маркер.
Добре, нека да направим нещо с данните, които идват от нашата JQuery. Първо трябва да се създаде проста база данни за съхранение на произхода ни, ние в последствие ще бъдат използвани за определяне на позицията на нашата елемент. След това, ние се нуждаем config.php файл, в който ще бъдат записани параметрите на свързването към базата данни, и след това да преминем към updatecords.php.
това е доста проста тук. Първото нещо, което правим - да го проверите дали данните са прехвърлени във файл. Ако това се случи, ние ще обърнем config.php файла с настройките и присвояване на стойност от $ json_decode данни (преминал пост променлива); json_decode - PHP-функция се осигурява в PHP 5.2.0, която ви позволява да се декодира JSON низ.
В заключение
Сега, когато имаме всичко готов да получи координатите на елемента и да ги прехвърляме в PHP за протокола, ние трябва да променим нашата HTML-маркиране за показване на елементите позиции. За да направите това, ще премахнем прост HTML-маркиране и да го създаде с помощта на PHP:
Тук можем да извърши опростен заявка към база, за да изберете всички редове от таблица coords. След това, което наричаме докато примката, което определя всяка избрана контактна линия от $ ред. Сега, ние да зададете променливи за всеки, индивидуален линия, получена от базата данни, и ги показва в съответното място.
Кажи на приятел
Свързани статии