Jquery перемещение элементов. Удаление, замена и перемещение элементов в jQuery

22.03.2019

В данном уроке рассматриваются вопросы манипулирования существующими элементами на странице:

Удаление элементов со страницы с помощью методов empty() , remove() , detach() и unwrap()
Замена элементов новыми элементами с помощью методов replaceWith() и replaceAll()
Перемещение элементов от одного родительского элемента к другому на странице

Удаление элементов со страницы Удаление всего, что находится внутри элемента: empty()

Метод empty() - это простейший способ удаления содержимого со страницы. Вызов метода empty() для объекта jQuery удаляет все содержимое из набора, соответствующего элементу (или элементам) в объекте jQuery.

Другими словами, метод empty() удаляем все наследственные элементы и узлы (такие, как текстовые узлы) из каждого элемента, попадающего в набор, оставляя элемент пустым.

В примере удаляется содержимое из двух элементов div:

$(init); function init() { // Удаляем содержимое #myDiv1 и #myDiv2 $(".emptyMe").empty(); }

Параграф с текстом

Другой параграф с текстом

После выполнения выше приведённого кода содержимое страницы изменится на:

Удаление элемента целиком: remove()

Если метод empty() удаляет всё внутри элемента, то метод remove() удаляет все, включая сам элемент. Например:

$(init); function init() { // Удаляем #myDiv1 и #myDiv2 целиком $(".removeMe").remove(); }

Параграф с текстом

Другой параграф с текстом

Текстовый узел, как он есть

после выполнения выше приведённого кода оба элемента div будут удалены со страницы:

Вы можете передать строку с условным селектором в метод remove() . В этом случае, удаляемые элементы будут фильтроваться селектором. Например:

$(init); function init() { // Удаляем только #myDiv2 $(".removeMe").remove(":contains("Другой параграф")"); }

Параграф с текстом

Другой параграф с текстом

Текстовый узел, как он есть

В выше приведённом примере будет удалён только элемент div , для которого установлен класс removeMe и содержащий текст "Другой параграф". Все остальное останется на странице:

Параграф с текстом

Удаление элемента без разрушения его данных: detach()

Метод remove() возвращает объект jQuery, который содержит удалённые элементы. Теоретически, можно удалить какие-нибудь элементы из одного места на странице, а позже снова присоединить их где угодно..

Однако, для того, чтобы сохранить ресурсы и избежать потенциальной проблемы с утечкой памяти, метод remove() удаляет все данные jQuery и события, ассоциированные с удалённым элементом. Например, если элементу было назначено событие jQuery click , а затем элемент был удалён со страницы с помощью метода remove() , то событие click будет удалено из элемента. Это может вызвать проблему, если позже захотите вернуть элемент обратно на страницу и восстановить его функциональность.

В данном случае может помочь метод detach() (появился в jQuery 1.4). Он действует почти также как и метод remove() , за исключением одного - он не удаляет данные jQuery и события, ассоциированные с удалённым элементом. Это означает, что позже вы можете присоединить удалённые элементы обратно с сохранением их метаданных jQuery.

Пример. Следующий скрипт назначает событие jQuery click каждому из двух параграфов на странице. Оба обработчика события просто переключают класс CSS "red" для параграфа, чтобы изменить цвет с красного на чёрный или обратно каждый раз, когда на него нажимают.

Затем скрипт удаляет первый параграф со страницы с использованием метода remove() и сохраняет объект jQuery , который содержал параграф в переменной myDiv1Para . Затем повторно присоединяем параграф к родительскому div с помощью метода appendTo() .

Тоже самое мы проделываем со вторым параграфом, только используем метод detach() вместо метода remove() .

< p.red { color: red; } $(init); function init() { // Назначаем событие click каждому параграфу div $("#myDiv1>p").click(function() { $(this).toggleClass("red"); }); $("#myDiv2>p").click(function() { $(this).toggleClass("red"); }); // Удаляем и восстанавливаем параграф #myDiv1 var myDiv1Para = $("#myDiv1>p").remove(); myDiv1Para.appendTo("#myDiv1"); // Удаляем и восстанавливаем параграф #myDiv2 var myDiv2Para = $("#myDiv2>p").detach(); myDiv2Para.appendTo("#myDiv2"); }

Параграф с текстом

Другой параграф с текстом

После выполнения данного скрипта первый параграф потеряет обработчик события click , а второй параграф сохранит свою функциональность полностью. Вы можете проверить, открыв страницу в браузере. Если нажать кнопку мыши на втором параграфе, то он будет менять цвет, а первый никак не будет реагировать на действия мыши.

Это происходит потому, что вызов метода remove() привёл к удалению обработчика события для первого параграфа, а метод detach() сохранил обработчик события click для второго параграфа.

Удаление родительского элемента: unwrap()

Метод unwrap() удаляет родителя элемента (или родителей набора элементов)из DOM. Элемент займёт место родительского элемента в DOM.

Следующий пример разворачивает содержание div . Другим словами происходит замещение div его содержимым:

$(init); function init() { // Удаляем элемент #myDiv, но сохраняем его содержимое $("#myPara").unwrap(); }

Параграф с текстом

Другой параграф с текстом

После выполнения выше приведённого кода, содержание страницы примет следующий вид:

Параграф с текстом

Другой параграф с текстом

Замена элементов Замена элемента новым содержимым: replaceWith()

Метод replaceWith() позволяет заменять элемент или набор элементов новым содержимым. Вы можете передать замещающий контент в любой из следующих форм:

Объект элемента , который создан с помощью функции JavaScript DOM, такой как document.getElementById() или document.createElement()
Строка HTML , представляющая замещающий контент
Объект jQuery , содержащей элемент (или элементы), который будет использоваться для замещения
Возвратная функция , которая должна возвращать замещающий HTML код

Ниже приводится пример, который показывает метод replaceWith() в действии. Производится замещение первого параграфа новой строкой HTML, второй параграф замещается объектом элемента, а третий параграф заменяется результатом функции, которая возвращает текущее время:

$(init); function init() { // Заменяем параграф в #myDiv1 новым параграфом $("#myDiv1>p").replaceWith("

Новый параграф с текстом

"); // Заменяем параграф в #myDiv2 горизонтальной линией var hr = document.createElement("hr"); $("#myDiv2>p").replaceWith(hr); // Заменяем параграф в #myDiv3 строкой с текущим временем $("#myDiv3>p").replaceWith(currentTime); function currentTime() { var currentTime = new Date(); var currentHours = currentTime.getHours (); var currentMinutes = currentTime.getMinutes (); var currentSeconds = currentTime.getSeconds (); // Pad the minutes and seconds with leading zeros, if required currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; return ("

Текущее время: " + currentHours + ":" + currentMinutes + ":" + currentSeconds + "

"); } }

Параграф с текстом

После выполнения кода содержимое страницы примет вид:

Новый параграф с текстом

Текущее время: 13:52:17

replaceAll() : альтернатива методу replaceWith()

Метод replaceAll() выполняет туже самую работу, что и метод replaceWith() , но вместо передачи замещающего контента в качестве аргумента, вам нужно передать элемент, который нужно заменить.

Например, следующие 2 строки кода делают одно и тоже:

$("#myDiv").replaceWith("

Здесь новый текст

"); $("

Здесь новый текст

").replaceAll("#myDiv");

Перемещение элементов

Теперь вы знаете, как удалять и заменять элементы. Остаётся открытым вопрос: как перемещать элементы по дереву DOM? Например, есть параграф внутри элемента div , и нужно его переместить в другой div .

Несмотря на то, что в jQuery нет специального метода для перемещения элементов по дереву DOM, в действительности это очень просто реализовать. Все, что нужно сделать, это выделить элемент(ы), которые вы хотите переместить; затем вызвать метод "добавления" , например, append() , appendTo() или prepend() , чтобы добавить выделенный элемент к другому родительскому элементу. jQuery автоматически распознает, что элемент(ы) уже существует на странице и переместит его к новому родителю.

Пример воспроизводит описанный процесс. Параграф перемещается из первого div во второй:

$(init); function init() { // Перемещаем параграф из #myDiv1 в #myDiv2 $("#myDiv2").append($("#myDiv1>p")); }

Параграф с текстом

После выполнения кода страница примет следующий вид:

Параграф с текстом

А здесь другой способ перемещения элемента:

// Перемещаем параграф из #myDiv1 в #myDiv2 $("#myDiv1>p").appendTo($("#myDiv2")); // Пермещаем параграф из #myDiv1 в #myDiv2 var para = $("#myDiv1>p"); para.prependTo("#myDiv2"); // Перемещаем параграф из #myDiv1 в #myDiv2 // с помощью явного отсоединения его и добавления в новое место $("#myDiv1>p").detach().prependTo("#myDiv2");

З-й пример демонстрирует очень полезную технику jQuery — связывание методов. Так как большинство методов jQuery возвращает объекты, то можно вызывать другой метод для возвращаемого объекта. Что в свою очередь приведёт к возвращению следующего объекта jQuery и так далее.

Так в выше приведённом примере объект jQuery возвращается методом detach() , который вызывается для удаления параграфа. А метод prependTo() вызывается для возвращённого объекта jQuery, чтобы добавить удалённый параграф к новому родительскому элементу.

Что произойдёт, если попытаться переместить какой-нибудь контент в более чем один родительский элемент в одно и то же время? Если это сделать, jQuery сначала удалит контент из старого родителя, затем клонирует контент столько раз, сколько нужно и добавит клоны в каждый указанный родительский элемент. Например:

$(init); function init() { // Перемещаем параграф из #myDiv1 в #myDiv2 и #myDiv3 $("#myDiv2, #myDiv3").append($("#myDiv1>p")); }

Параграф с текстом

После выполнения выше описанного кода, содержимое страницы будет выглядеть так:

Параграф с текстом

Резюме

Удаление, замена и перемещение контента являются фундаментальными концепциями, которые позволяют строить замечательные сайты на основе jQuery.

Очередная глава из книги «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). Прежде всего извиняюсь перед читателями за столь большой промежуток между публикациями глав. Но все-таки я это сделал, чему, конечно же, рад. Надеюсь, что и вы тоже не останетесь равнодушными. Итак, продалжаем.

Глава 3. Оживляем страницу с jQuery.3.1. Манипулирование свойствами и атрибутами объектов.3.1.1. Манипулирование со свойствами объектов. Самый простой способ проверить или изменить элементы выбранного нами набора позволяет нам команда each():

$(‘img’).each(function(n){
this.alt=’Это image[’+n+’] с id равным ‘+this.id;
});

Это выражение применит указанную функцию к каждому элементу на странице, при этом будет изменен атрибут alt используя порядковый номер элемента и его id.

3.1.2, 3.1.3 Получение и изменение значения атрибутов. Как мы убедимся позже, многие методы в jQuery используются как для чтения, так и для записи, в зависимости от атрибутов и их количества, передаваемых методу.

Так, метод attr() может использоваться как для получения значения атрибутов, так и для их установки. Если методу будет передано только название атрибута, он вернет его значение, например:

$(“#myImage”).attr(“alt”)

Так мы получим alt для элемента с id #myImage.

$(“#myImage”).attr(“alt”,”Му picture”)

Как вы уже наверное догадались, установим этому же элементу alt “My picture”.

Стоит отметить, что вместо нового значения атрибута можно передавать этому методу функцию. Пример:

$(‘*’).attr(‘title’,function(index) {
return ‘I am element ’+index+’ and my name is ‘ +
(this.id ? this.id: ‘unset’);
});

Эта сложная пока для нас функция пробегает через все элементы набора на странице, изменяя атрибут title в соответствии с индексом элемента и его id.

Более того, метод attr() позволяет изменять несколько атрибутов одновременно:

$(‘input’).attr({value: ‘’, title: ‘Please enter a value’});

Таким образом мы можем очистить все значения инпутов и установить их title как «Please enter a value».

3.1.4 Удаление атрибутов. Для того, чтобы удалить атрибут у элемента DOM, в jQuery есть специальный метод removeAttr(). Например:

$(‘img’).removeAttr(‘alt’);

Так мы удалим атрибут alt у всех выбранных элементов img.

3.2 Работа со стилями элементов.3.2.1 Добавление и удаление имен классов. Определение класса делается очень просто с помощью метода addClass(), который присваивает переданное ему имя класса всем элементам в наборе. Например:

$(‘img’).addClass(‘noBorder’);

Удаление класса делается командой removeClass():

$(‘img’). removeClass (‘noBorder’);

Следующий метод довольно интересный: toggleClass() назначает класс элементу в наборе, если этот класс для него не был определен, и, наоборот, удаляет класс у элемента в наборе, если класс был назначен.

Очень полезно бывает применять такой метод в таблицах, где, допустим, нам нужно поменять закрашенные строки в белые, а белые – в закрашенные. Делается это так:

$(‘tr’).toggleClass(‘striped’);

Где striped было названием класса для закрашенной строки.

3.2.2 Получение и установка стилей. Работа напрямую со стилями дает нам большие возможности.

Метод css() работает аналогично методу attr(), позволяя нам устанавливать индивидуальные свойства CSS для элемента, передавая методу пару имя-значение или даже менять несколько свойств, передавая новые значения для них в объекте.

Более того, метод также прекрасно обрабатывает функции, переданные ему в качестве значения для свойства. Например, увеличим ширину элементов в наборе на 20 пикселей:

$(‘div.expandable’).css(‘width’,function(){
return $(this).width() + 20 + “px”;
});

Следующий пример показывает возможность передачи методу группы параметров в качестве объектов:

$(‘div.example’).css({width: ‘100px’, height: ‘200px’});

И, наконец, метод css() позволяет получить значение свойства, переданного методу. Например, узнать ширину элемента можно так:

$(‘div.examle’).css(‘width’);

Для часто используемых свойств в jQuery есть специальные команды. Так, мы можем узнать или изменить высоту и ширину объектов специальными методами height() и width(). Соответственно, если мы передаем методу значение – мы устанавливаем это значение согласно методу, его получившему, а если просто вызываем метод – получим нужное нам значение (при этом переданное значение будет установлено в пикселях), то есть:

$(‘div.example’).width(500)

Установит ширину блока в 500 пикселей. Кстати, это то же самое, что и

$(‘div.example’).css(“width”,”500px”)

Узнать теперь ширину блока можно так:

$(‘div.example’).width()

3.2.3 Еще немного полезных команд для работы со стилями. Иногда необходимо проверить, принадлежит ли элемент к определенному классу или нет. Сделать это поможет функция hasClass():

$(‘p:first’).hasClass(‘supriseMe’)

Если какой-нибудь элемент в наборе принадлежит к указанному классу, функция вернет true.

3.3 Установка контента элементов.3.3.1 Замена HTML или текста. Самая простая команда – html() – возвращает нам HTML-код первого соответствующего элемента, если параметр не был задан, или устанавливает HTML-фрагмент, переданный как параметр, содержимым всех выбранных элементов.

Также, есть возможность получить только текстовое содержимое элементов. Для этого есть команда text().

Three

Four

Var text=$("#theList’).text();

В результате переменная text будет содержать строку «OneTwoThreeFour».

Как и с предыдущей функцией, мы можем устанавливать текстовое содержимое для элемента, если функции test() будет как параметр необходимый текст. При этом если в тексте будут символы < или > они будут заменены на спецсимволы.

Стоит отметить, что применение этих двух команд для установки содержимого элементов приведет к удалению предыдущего содержимого, поэтому используйте эти команды осторожно.

3.3.2 Перемещение и копирование элементов. Для добавления контента в конец существующего служит команда append().

Функция добавляет строку или HTML-фрагмент, переданные ей как параметры, к новому или существующему элементу DOM либо к набору вложенных элементов jQuery. Рассмотрим несколько примеров.

$("p").append("some text");

Это выражение присоединит HTML-фрагмент, созданный из переданной функции строки, к концу уже существующего содержимого всех элементов

На странице.

Более комплексное использование этой команды позволяет назначить существующие элементы DOM дочерними к другим элементам. То есть:

$("p.appendToMe").append($("a.appendMe"))

Позволит назначить все ссылки класса appendMe дочерними элементами всех

На странцие класса appendToMe. При этом конечное положение назначаемых элементов зависит от числа целевых элементов. Если такой один, то назначаемые элементы будут перемещены с их первоначального положения на странице, если же целевых элементов несколько, то назначаемые элементы останутся на своем прежнем месте, а целевым элементам будут назначены их копии.

Для перемещения или копирования элемент из одного места в другое можно также использовать команду appendTo(), которая перемещает все элементы вложенного набора в конец содержимого целевого элемента, указанного как параметр функции. Смотрим пример, чтобы увидеть отличие от предыдущей функции:

$(" a.appendMe").appendTo($("p.appendToMe "))

В качестве цели опять же может выступать как селектор, так и DOM элемент. Как и в предыдущей функции, если целевой элемент один, то будет совершена операция перемещения, если целевых объектов несколько, то будет произведено копирование.

Принцип работы следующих команд похож на работу append() и appendTo():
prepend() и prependTo() – вставляет исходный элемент перед целевым, а не после.
before() и insertBefore() – вставляет элемент перед целевыми элементами, а не перед первым потомком.
after() и insertAfter() – вставляет элемент после целевых элементов, а не после последнего потомка.

Рассмотрим следующий пример:

$(‘

Привет!

’).insertAfter(‘p img’);

Это выражение создаст новый абзац и вставит копии его после каждого рисунка внутри абзаца.

3.3.3 Вложение элементов Другой тип DOM-манипуляций, к которому мы часто обращаемся это вложение элементов (или группы элементов) в какой-то другой элемент. Например, нам захочется поместить все ссылки определенного класса внутрь . Сделать это можно с помощью команды wrap(). Этот метод вкладывает выбранный набор элементов внутрь переданного HTML-кода либо клона переданного элемента.

$(“a.surprise”).wrap(“”);

$(“a.surprise”).wrap($(“div:first”));

Что же делать, если нам нужно поместить все выбранные элементы не по одному, а вместе в какой то общий контейнер? В этом нам поможет функция wrapAll().

Ну а когда мы хотим поместить в нужный нам контейнер не каждый элемент, а только его содержимое – используем функцию wrapInner().

3.3.4 Удаление элементов Если мы хотим очистить или удалить набор элементов, это легко сделать с помощью команды remove(), которая удаляет все элементы вложенного набора из DOM на странице.

При этом стоит учитывать, что, как и многие другие команды jQuery, результатом работы этой команды является опять же набор элементов. И пусть мы удалили его из DOM, мы все равно можем его дальше использовать в других функциях, например, тех же appendTo() или insertAfter() или другими похожими.

Чтобы очистить элементы от их содержимого можно использовать команду empty(). Она удаляет содержимое всех элементов DOM в наборе.

Распространено применение remove() и after() для операции замены. Делается это подобным образом:

$(‘div.elementToReplace’).after(‘

Я заменяю блок

’).remove();

Поскольку after() возвращает исходный элемент , мы можем попросту убрать его, оставив только новый абзац

Если идея вам понравилась, можно доработать ее и написать следующую функцию:

$.fn.replaceWith = function(html) {
return this.after(html).remove();
}

Тогда предыдущую операцию мы выполним уже так:

$(‘div.elementToReplace’).replaceWith(‘

Я заменяю блок

’);

А что же делать, когда мы хотим не переместить элементы, а только скопировать?..

3.3.5 Клонирование элементов Для этого в jQuery есть команда clone(). Она создает и возвращает копию набора. Все элементы и потомки копируются. При переданном параметре true копируются также все обработчики.

Клонирование элементов малоэффективно, пока мы не сделаем что-нибудь с копией. Тут уже все зависит от нашей фантазии. Вот пара примеров:

$(‘img’).clone().appendTo(‘fieldset .photo’);

Это выражение делает копию всех изображений и помещает их во все элементы класса photo.

Еще один пример:

$(‘ul’).clone().insertBefore(‘#here’);

Выполняет похожую операцию. Здесь стоит отметить, что клонируются все элементы

(если такие, конечно, есть).
И последний пример:
$(‘ul’).clone().insertBefore(‘#here’).end().hide();
Это выражение похоже на предыдущую операцию, но после вставки копии команда end() выбирает исходный набор, после чего он скрывается командой hide().
3.4 Операции с элементами форм Основное действие, которое выполняется с формами – это работа с их данными. Команда val() возвращает содержимое атрибута value первого элемента в наборе. Когда элемент формы содержит несколько вариантов выбора, возвращается массив значений всех этих вариантов.
Эта команда, хотя и довольно полезная, имеет ряд ограничений. Если первый элемент набора не является элементом формы – получим сообщение об ошибке. Также эта команда не различает отмеченные и не отмеченные элементы чекбоксов или радиобатонов.
Для случая с радиобатоном можно поступить следующим образом:
$(‘:checked’).val()
Это выражение вернет значение единственного выбранного радиобатона с именем radioGroup (или же вернет значение undefined если ни один радиобатон не был выбран). Этот пример не может быть применен к чекбоксам, так как здесь возможно более одного выбранного значения, а как уже говорилось, val() возвращает содержимое атрибута value первого элемента в наборе.
При передаче команде параметра, он будет установлен как значение для value всех выбранных элементов набора. При этом опять же есть ряд ограничений. Например, нельзя установить несколько значений для элемента с множественным выбором.
Еще одно направление использования val() – установка флажков чекбоксов и радиобатонов или выбор опций . При этом передается массив значений, и, если любое из них совпадет со значением элемента, элемент будет выбран (отмечен). Например:
$(‘input,select’).val([‘one’,’two’,’three’]);
Это выражение проверит все элементы и на совпадение их значений с любой из переданных строк: one, two или three. При совпадении значений чекбоксы или радиобатоны будут отмечены, опция селекта будет выбрана.
Очередная глава подошла к концу. Опять же буду рад здоровой критике. Спасибо.
Также напомню, что эту и другие статьи вы всегда сможете найти

Бывают случаи, когда вам может понадобиться создать перетаскиваемый элемент внутри вашего веб-приложения. Это отличная функциональность, однако, возможно вы хотите, чтобы элемент оставался на новом месте, после перетаскивания. В сегодняшней статье вы узнаете, как можно легко перетаскивать и закреплять в новом месте нужный элемент даже после перезагрузки страницы, с помощью захвата и хранения его X и Y координат.
Сценарий
Итак, у вас есть элемент на странице. Вы можете перетаскивать его туда-сюда. Но, когда страница перезагружается, элемент возвращается на исходную позицию. И хотя нам нужно, чтобы элемент был перетаскиваемый, при этом нужно, чтобы наш элемент достаточно было перетащить один раз. Давайте рассмотрим простое решение, реализующее данную функциональность.
Начало
Для этого примера нам понадобится библиотека , и плагин JQuery-JSON . Кроме этого, мы также будем использовать PHP и базу данных MySQL для разбора и хранения наших данных. Если вы новичок в jQuery, не беспокойтесь. JQuery — это расширяемая, быстрая и легковесная JavaScript-библиотека, которую легко и весело использовать. Библиотека имеет хорошо структурированную документацию и огромное сообщество.
HTML и CSS
Начнем с HTML-разметки и стилей для нашего примера. Сначала CSS:
Html, body { background:#151515; margin:0 0 0 0; padding:0 0 0 0; } #glassbox { background:#333; border:1px solid #000; height:400px; margin:30px auto auto auto; position:relative; width:960px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #element { background:#666; border:1px #000 solid; cursor:move; height:143px; padding:10px 10px 10px 10px; width:202px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #respond{ color:#fff; margin:0 auto 0 auto; width:960px; }
CSS – очень простой. Мы назначаем html и body нулевые свойства, для чистки внешних и внутренних отступов, далее устанавливаем значения высоты, ширины и другие свойства для наших элементов. — moz-border-radius и -webkit-border-radius – это два свойства, позволяющие нам создать закругленные углы (работает пока только в Mozilla Firefox и Safari 3) для наших элементов. Теперь, давайте взглянем на HTML:
Simple Draggable Element Persistence with jQuery Move the Box
Как видите, мы создали очень простую страницу, в которую подключили наш CSS, библиотеку JavaScript и плагины, кроме того, страница содержит элементы, к которым мы будем применять некоторые эффекты и события. Обратите внимание, что файл jquery-ui представляет собой специальную сборку, включающую в себя только ядро и функции перетаскивания элементов.

JavaScript
Теперь самое интересное! Сначала давайте рассмотрим базовые функции, которые мы будем использовать для применения некоторых эффектов к нашим элементам. Разберем все до основания.
$(document).ready(function() { $("#element").draggable({ containment: "#glassbox", scroll: false })
Сначала мы говорим браузеру: «Эй, это код, который мы хотим запустить; это не HTML, это JavaScript». Затем, мы ждем пока документ полностью загрузится, после того как это случилось, вызываем функцию для получения нашего блока #element , и добавляем к нему обработчик перетаскивания с базовыми настройками. Опция containment содержит наш элемент внутри родительского блока, и мы устанавливаем значение scroll в false , потому что, нам не нужен скролл.

Mousemove(function(){ var coord = $(this).position(); $("p:last").text("left: " + coord.left + ", top: " + coord.top); })
Внутри этого фрагмента, мы вызываем, обработчик события mousemove и говорим ему: «Когда мышь передвигается, установить переменную coord равной значению текущей позиции нашего блока #element» Затем мы получаем последний параграф в блоке #(“p: last”) и печатаем текст, выводящий значения свойств left(x) и top(y) нашего элемента, относительно родительского объекта (которым является блок #glassbox).
Mouseup(function(){ var coords=; var coord = $(this).position(); var item={ coordTop: coord.left, coordLeft: coord.top }; coords.push(item); var order = { coords: coords }; $.post("updatecoords.php", "data="+$.toJSON(order), function(response){ if(response=="success") $("#respond").html("X and Y Coordinates Saved!").hide().fadeIn(1000); setTimeout(function(){ $("#respond").fadeOut(1000); }, 2000); }); }); }); lt;/script>
Ну да, здесь уже сложнее. В этом фрагменте мы собираемся сделать кучу вещей. Сначала, мы устанавливаем пустой массив, а затем получаем некоторые значения для его наполнения. С помощью вызова обработчика событий.mouseup() мы велим браузеру отслеживать событие, когда вы отпускаете кнопку мыши. Мы указываем, что переменная coords – это пустой массив и снова устанавливаем ее значение равной позиции нашего блока #element .

Затем, нам нужно создать список из двух строчек, которыми будут coordTop: и coordLeft: , соответствующие позициям left и top , нашего блока. С помощью строки coords.push(item) , мы заполним наш список массивом из координат. Затем задаем переменную order как новый список, в котором ключ coords будет соответствовать нашему массиву coords . Теперь немного аякса.

$.post – это обработчик запроса AJAX, который загружает удаленную страницу, с помощью метода HTTP POST . Эта функция принимает следующие параметры: url, дата, ответ и тип данных для возврата. В этом примере, мы укажем файле updatecoords.php в качестве нашего URL, потому что, именно этому файлы мы хотим отправить наши данные. Затем, мы опишем тип данных, с помощью включения функции $.toJSON , определенной в плагине JSON и назначим переменную order , в качестве данных, которые должен вернуть.toJSON .

Далее, мы создаем ответ, который проверяет возвращение успешного ответа от нашего PHP-файла. В случае получения успешного ответа, мы отображаем сообщение об успешном сохранении координат, используя метод.fadeIn() и скорость 1000 миллисекунд, затем задаем таймер на 2000 миллисекунд, и снова медленно прячем это сообщение, с помощью метода.fadeOut() . Вот так будет выглядеть наш JavaScript в целом виде:
$(document).ready(function() { $("#element").draggable({ containment: "#glassbox", scroll: false }).mousemove(function(){ var coord = $(this).position(); $("p:last").text("left: " + coord.left + ", top: " + coord.top); }).mouseup(function(){ var coords=; var coord = $(this).position(); var item={ coordTop: coord.left, coordLeft: coord.top }; coords.push(item); var order = { coords: coords }; $.post("updatecoords.php", "data="+$.toJSON(order), function(response){ if(response=="success") $("#respond").html("X and Y Coordinates Saved!").hide().fadeIn(1000); setTimeout(function(){ $("#respond").fadeOut(1000); }, 2000); }); }); });
Поместите этот код ниже HTML, сразу после закрывающего тега body.
PHP
Хорошо, давайте сделаем что-нибудь с данными, которые приходят от нашего JQuery. Сначала нужно создать простую базу данных, для хранения наших координат, которые мы впоследствии будем использовать для определения позиции нашего элемента. Затем, нам понадобится файл config.php, в котором будут записаны параметры подключения к базе данных, а затем мы перейдем к updatecords.php.

Database: "xycoords" CREATE TABLE IF NOT EXISTS coords (id int(11) NOT NULL AUTO_INCREMENT, x_pos int(4) NOT NULL, y_pos int(4) NOT NULL, PRIMARY KEY (id)) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Config.php

updatecoords.php

Здесь все довольно просто. Первое, что мы делаем – это проверяем, были ли переданы данные в файл. Если это произошло, мы включаем наш файл с настройками config.php и назначаем переменной $data значение json_decode(passed post variable); json_decode – это PHP-функция, представленная в PHP 5.2.0, которая позволяет декодировать строку JSON.

Поскольку наша переменная $data содержит массив данных, нам нужно разобрать его на части, чтобы получить нужные значения. Для этого мы пройдемся по массиву $data->coords () (который был получен из переменной order в JavaScript) и обработаем каждый элемент. В результате, из каждой пары ключ – значение будет создан объект списка, который мы в дальнейшем укажем и создадим переменную для его вывода. При этом мы будем использовать функцию preg_replace , для исключения ненужных символов. Кроме того, мы подготовим наши значения для вставки в базу данных, путем экранирования кавычек, и апострофов, с помощью функции mysqli_real_escape_string . Если все прошло хорошо, нам нужно будет вернуть успешный результат JavaScript.

В заключение
Теперь, когда у нас уже все готово, для того чтобы получить координаты элемента и передать их в PHP для записи, нам понадобится изменить нашу HTML-разметку для отображения позиции элемента. Для этого, мы удалим простую HTML-разметку и создадим ее с помощью PHP:

Поделись статьей:
Похожие статьи