Удаление, замена и перемещение элементов в jQuery. Перетаскивание элементов (Drag and drop)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Метод 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() удаляет родителя элемента (или родителей набора элементов)из DOM. Элемент займёт место родительского элемента в DOM.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$("#myDiv").replaceWith("

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

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

Теперь вы знаете, как удалять и заменять элементы. Остаётся открытым вопрос: как перемещать элементы по дереву 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). Прежде всего извиняюсь перед читателями за столь большой промежуток между публикациями глав. Но все-таки я это сделал, чему, конечно же, рад. Надеюсь, что и вы тоже не останетесь равнодушными. Итак, продалжаем.

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

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

Так, метод 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».

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

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

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

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

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

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

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

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

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

Метод 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()

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

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

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

• Three


• Four

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

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

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

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

Функция добавляет строку или 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() – вставляет элемент после целевых элементов, а не после последнего потомка.

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

$(‘

Привет!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$(‘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. При совпадении значений чекбоксы или радиобатоны будут отмечены, опция селекта будет выбрана.

  Очередная глава подошла к концу. Опять же буду рад здоровой критике. Спасибо.

  Также напомню, что эту и другие статьи вы всегда сможете найти

  Как изменить содержимое элементов в jQuery

  В этом уроке мы попробуем свои силы в изменении содержимого элементов в jQuery.

  Итак, наиболее часто используемой операцией является изменение содержимого элементов. Вне библиотеки jQuery для этой цели используется свойство innerHTML объекта document. Например, чтобы вставить новый фрагмент в элемент с идентификатором divl, можно воспользоваться следующим кодом.

  alert($("div").eq(0).text());

  Новое значение&1t;/b>

  alert($("div").html());

  $("div").text("Новое значение");

  $("#divl").append("Новый текст");
  
  Текст
  

  Текст
  Новый Текст

  Теперь добавим DOM-элемент.

  $("#divl").append($("Новый текст").get(0));
  $("#divl").append($("Новый текст")) ;

  Prepend(Выражение) - добавляет Выражение в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу appendO, за исключением того, что добавляет Выражение не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.

  $("#divl").prepend("Новый текст");
  
  Текст
  
  Результат будет выглядеть следующим образом.
  Новый текст
  Текст
  

  $("Новый текст").appendTo("#divl");
  $("#divl").append("Новый текст");

  $("Новый текст").prependTo("#divl");
  $("#divl").prepend("Новый текст");

  Как добавить содержимое перед элементом или после него

  В предыдущем разделе мы рассмотрели изменение внутреннего содержимого элемента. Библиотека jQuery предоставляет также методы, которые позволяют добавить какое-либо содержимое перед элементом или после него. Рассмотрим эти методы.

  Aftег (Выражение) - добавляет Выражение после всех элементов коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код после элемента.

  $("#divl").after("Новый текст");
  текст
  Результат будет выглядеть следующим образом.
  текст Новый текст
  Теперь добавим DOM-элемент.
  $("#divl").after($("Новый текст").get(0));

  А теперь добавим созданный элемент коллекции jQuery. $("#divl").after($("Новый текст"));

  Before (Выражение) - добавляет Выражение перед всеми элементами коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу after (), за исключением того, что добавляет Выражение не после элемента, а перед ним. Для примера добавим HTML-код перед элементом.

  $("#divl").before("Новый текст");
  текст

  Результат будет выглядеть следующим образом.
  Новый текст текст

  InsertAfter (Селектор) - добавляет коллекцию элементов jQuery после всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код после элемента с идентификатором divl.

  $("Новый текст").insertAfter("#divl");

  Результат будет таким же, как и при использовании метода after () .
  $("#divl").after("Новый текст");

  InsertBefore (Селектор) - добавляет коллекцию элементов jQuery перед всеми элементами, соответствующими указанному селектору. Для примера добавим HTML-код перед элементом с идентификатором divl.

  $("Новый текст").insertBefore("#divl");

  Результат будет таким же, как и при использовании метода before () .
  $("#divl").before("Новый текст");

  Вложение элементов

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

  Wraplnner (HTML-элемент или BОМ-элемент) -вкладывает внутреннее содержимое каждого элемента коллекции в другой элемент. Для примера выделим содержимое всех тегов div.

  $ (“div”) .wraplnner (“”) ;
  текст l текст 2
  Результат будет выглядеть следующим образом.
  текст l
  Текст 2

  Такого же эффекта можно достичь, передав в качестве параметра DOM-элемент.

  $("div") .wraplnner(document.createElement ("b"));

  Можно также передать элемент, созданный с помощью функции $ ().

  $ ("div") .wraplnner ($ (MM)) ;

  Wrap (HTML-элемент или BОМ-элемент) -полностью вкладывает каждый элемент коллекции в другой элемент.

  $("div") .wrap("") ;
  Текст l Текст 2

  Результат выполнения таков:
  Текст l
  Текст 2

  WrapAll (HTML-элемент или ВОМ-элемент) - собирает все элементы коллекции в одном месте и вкладывает их в другой элемент.

  $ ("div") .wrapAll ("H) ;
  Какой-то текст 1
  Текст
  Какой-то текст Текст 2
  Какой-то текст 3 Текст 3

  Результат будет выглядеть следующим образом.
  Какой-то текст 1
  Текст lТекст 2Текст 3
  Какой-то текст 2 Какой-то текст 3

  Как видно из примера, все элементы коллекции были размещены после первого элемента и расположены внутри тега u.

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

  Если в качестве параметра методов before (), prepend (), append () и after () указать коллекцию существующих элементов jQuery, то они будут перемещены. Куда будут вставлены элементы, зависит от конкретного метода: before () (перед элементом), ргеpend() (в начало содержимого), append () (в конец содержимого), after () (после элемента). Для примера найдем все ссылки на странице и добавим их в конец элемента.

  $("ttdivl").append($("а"));
  
  Текст
  
  l
  

  
  Текст1

  Как видно из примера, после удаления содержимого элемента с идентификатором divl сам элемент все еще остается доступным для манипуляций.

  Remove ([Селектор]) - полностью удаляет элементы из объектной модели документа.

  Этот элемент будет полностью удален
  
  

  Данный пример демонстрирует отсутствие элемента после щелчка на кнопке Удалить. Щелкнув на кнопке Количество элементов в первый раз, мы получим число 1, а если щелкнуть на ней после удаления элемента, то получим число 0.

  Если коллекция состоит более, чем из одного элемента, то будут удалены все элементы. Метод remove () позволяет задать дополнительное условие, которому должны соответствовать удаляемые элементы. В качестве примера удалим все ссылки с расширением. php.

  $("а") . remove (" ") ;

  Изменение содержимого элементов

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

  Наиболее часто используемой операцией является изменение содержимого элементов. Вне библиотеки jQuery для этой цели используется свойство innerHTML объекта document. Например, чтобы вставить новый фрагмент в элемент с идентификатором divl, можно воспользоваться следующим кодом.

  document.getElementByld("divl").innerHTML = "Новый текст";

  Библиотека jQuery также позволяет использовать это свойство. Для этого находим элемент с помощью функции $ (), а затем преобразуем коллекцию элементов jQuery в набор DOM-элементов.

  $("#divl").innerHTML = "Новый текст";

  Для этой цели можно также воспользоваться методом get () .

  $("#divl").get(0).innerHTML = "Новый текст";

  В библиотеке jQuery для изменения содержимого элементов предназначены следующие методы.

  Text () - позволяет получить или задать текст элемента. Если параметр не указан, то метод возвращает текстовое значение без тегов. При наличии нескольких элементов в коллекции будут возвращены все значения в виде строки. Если необходимо получить значение только первого элемента из коллекции, то можно воспользоваться методом eq () .

  alert($("div").eq(0).text());

  Можно также ограничить набор с помощью селектора:

  first. alert($("div:first").text());

  При указании строки в качестве параметра она заменит содержимое всех элементов коллекции. В случае наличия в строке специальных символов они будут заменены на HTML-эквиваленты.

  $("div").text("Новое значение");

  В этом примере строка в исходном HTML-коде будет выглядеть следующим образом.

  Новое значение

  Html () - позволяет получить или задать HTML-код элемента. Если параметр не указан, то метод возвращает значение вместе с тегами. При наличии нескольких элементов в коллекции будет возвращено значение только первого элемента.

  alert($("div").html());

  При указании HTML-кода в качестве параметра он заменит содержимое всех элементов коллекции, и объектная модель документа будет обновлена. Выведем HTML-код во всех тегах div.

  $("div").text("Новое значение");

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

  $("div:first").html("Новое значение");

  Append (Выражение) - добавляет Выражение в конец содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код в конец элемента.

  $("#divl").append("Новый текст");
  
  Текст
  

  Результат будет выглядеть следующим образом.

  Текст
  Новый Текст

  Теперь добавим DOM-элемент.

  $("#divl").append($("Новый текст").get(0));
  А теперь добавим созданный элемент коллекции jQuery.
  $("#divl").append($("Новый текст")) ;

  Prepend(Выражение) - добавляет Выражение в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу append (), за исключением того, что добавляет Выражение не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.

  $("#divl").prepend("Новый текст");
  
  Текст
  

  Результат будет выглядеть следующим образом.
  Новый текст
  Текст
  

  AppendTo (Селектор) - добавляет коллекцию элементов jQuery в конец всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в конец элемента с идентификатором divl.

  $("Новый текст").appendTo("#divl");

  Результат будет таким же, как и при использовании метода append () .
  $("#divl").append("Новый текст");

  Как видно из примера, мы поменяли параметры местами и использовали метод append () вместо метода appendTo ().

  PrependTo (Селектор) - добавляет коллекцию элементов jQuery в начало всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в начало элемента с идентификатором divl.

  $("Новый текст").prependTo("#divl");

  Результат будет таким же, как и при использовании метода prepend () .
  $("#divl").prepend("Новый текст");

  182

  В этом примере мы выбираем элемент div и делаем его перемещаемым путем вызова для него метода draggable() . Как показано на рисунке ниже, в открывшемся документе элемент занимает свою обычную позицию, но после этого его можно переместить с помощью указателя мыши в любое место в окне браузера:

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

  Взаимодействие Draggable реализуется исключительно за счет использования специфической HTML-разметки и CSS-стилей. Это означает, что данная функциональность будет работать практически в любом браузере, но наделенные ею элементы не смогут работать с аналогичными собственными средствами Drag-and-drop операционных систем.

  Определяемые спецификацией HTML5 операции Drag-and-drop обычно реализуются с использованием собственных механизмов операционных систем. Если вы используете механизм Drag-and-drop jQuery UI, то во избежание возникновения конфликтных ситуаций эквивалентные средства HTML5 лучше отключить. С этой целью установите для атрибута draggable элемента body документа значение false.

  Настройка взаимодействия Draggable

  Существует множество опций настройки для взаимодействия Draggable. Наиболее важные свойства, рассмотрению которых посвящены следующие разделы, приведены в таблице ниже:

  Свойства взаимодействия Draggable Свойство Описание

  axis	Ограничивает возможности перемещения определенными направлениями. Значение по умолчанию - false, оно означает отсутствие ограничений, но можно также указать значение "x" (перемещение только вдоль оси X) или "y" (перемещение только вдоль оси Y)
  containment	Ограничивает местоположение перемещаемого элемента определенной областью экрана. Типы поддерживаемых значений описаны в таблице ниже, при рассмотрении соответствующего примера. Значение по умолчанию - false, оно означает отсутствие ограничений
  delay	Определяет время, в течение которого должно осуществляться перетаскивание элемента, прежде чем он переместится. Значение по умолчанию - 0, оно означает отсутствие задержки
  distance	Определяет расстояние, на которое пользователь должен перетащить элемент из его начальной позиции, прежде чем он действительно переместится. Значение по умолчанию - 1 пиксель
  grid	Осуществляет принудительную привязку перемещаемого элемента к ячейкам сетки. Значение по умолчанию - false, оно означает отсутствие привязки

  Ограничение направлений перемещения

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

  ... div.dragElement {font-size: large; border: thin solid black; padding:16px; width: 8em; text-align: center; background-color: lightgray; margin: 4px } $(function() { $(".dragElement").draggable({ axis: "x" }).filter("#dragV").draggable("option", "axis", "y"); }); Перетащить по вертикали Перетащить по горизонтали Запустить пример

  В этом примере мы определяем два элемента div, выбираем их с помощью jQuery и вызываем метод draggable(). В качестве аргумента этому методу передается объект, который первоначально ограничивает перемещение обоих элементов div направлением вдоль оси X. Применив затем метод jQuery filter(), мы получаем возможность выбрать элемент dragV без повторного поиска средствами jQuery по всему документу и установить для него другое разрешенное направление перемещения - вдоль оси Y. Таким образом, мы получаем документ, в котором один элемент div можно перетаскивать только в вертикальном направлении, а другой - только в горизонтальном. Результат представлен на рисунке:

  

  Ограничение допустимой области перемещения элемента

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

  Пример использования опции containment приведен ниже:

  ... div.dragElement {font-size: large; border: thin solid black; padding:16px; width: 8em; text-align: center; background-color: lightgray; margin: 4px } #container { border: medium double black; width: 700px; height: 450px} $(function() { $(".dragElement").draggable({ containment: "parent" }).filter("#dragH").draggable("option", "axis", "x"); }); Перетащить по горизонтали Перетащить внутри родителя Запустить пример

  В этом примере возможности перемещения обоих элементов ограничены таким образом, что их можно перетаскивать только внутри родительского элемента, в качестве которого выступает элемент div с фиксированными размерами. Для одного из перемещаемых элементов div с помощью опции axis введено дополнительное ограничение, заключающееся в том, что он может перемещаться внутри родительского элемента только в горизонтальном направлении. Результат проиллюстрирован на рисунке:

  

  Ограничение возможностей перемещения элемента ячейками сетки

  Опция grid позволяет задать привязку перемещаемого элемента к ячейкам сетки. Эта опция принимает в качестве значения массив из двух элементов, определяющих ширину и высоту ячеек сетки в пикселях. Пример использования опции grid приведен ниже:

  ... #draggable {font-size: x-large; border: thin solid black; width: 5em; text-align: center; padding:10px} $(function() { $("#draggable").draggable({ grid: }); }); Перетащи меня Запустить пример

  В этом примере задана сетка с ячейками шириной 100 пикселей и высотой 50 пикселей. Когда вы перетаскиваете элемент, он "перескакивается" из одной (невидимой) ячейки в другую. Эффект привязки является весьма показательным примером использования функциональности взаимодействий, однако его трудно передать с помощью экранных снимков.

  Можно создать эффект привязки лишь для одного направления, указав для оси свободного перемещения значение 1. Например, если присвоить опции grid значение , то элемент будет привязываться к ячейкам сетки шириной 100 пикселей при перемещении по горизонтали, но перемещение по вертикали будет свободным.

  Задержка перемещения

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

  Пример использования обеих настроек приведен ниже:

  ... #time, #distance {font-size: large; border: thin solid black; padding: 10px; width: 120px; text-align: center; background-color: lightgray; margin: 4px; } $(function() { $("#time").draggable({ delay: 1000 }) $("#distance").draggable({ distance: 150 }) }); Блок с задержкой времени Блок с минимальным расстоянием Запустить пример

  В этом примере есть два перемещаемых элемента, для одного из которых задержка задана с помощью опции delay, а для другого - с помощью опции distance.

  В случае задержки, определяемой опцией delay, пользователь должен выполнять перетаскивание в течение заданного времени, прежде чем это приведет к действительному перемещению элемента. В данном примере длительность этого промежутка составляет 1000 мс. Перемещать мышь в это время вовсе не обязательно, но на протяжении всего периода задержки кнопка мыши должна оставаться в нажатом состоянии, после чего элемент можно будет переместить, сдвинув мышь. По истечении времени задержки перемещаемый элемент привяжется к местоположению указателя мыши с учетом ограничений, налагаемых опциями grid, region и axis, о которых ранее говорилось.

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

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

  Использование методов взаимодействия Draggable

  Все методы, определенные для взаимодействия Draggable, входят в набор базовых методов, с которыми вы уже познакомились при рассмотрении виджетов. Методы, специфические для взаимодействия Draggable, не предусмотрены, поэтому мы не будем рассматривать их подробно. Перечень доступных методов приведен в таблице ниже:

  Использование событий взаимодействия Draggable

  Взаимодействие Draggable поддерживает простой набор событий, уведомляющих о перетаскивании элемента. Эти события описаны в таблице ниже:

  Как и в случае событий виджетов, на эти события также можно реагировать. Пример обработки событий start и stop приведен ниже:

  ... #draggable {font-size: x-large; border: thin solid black; width: 190px; text-align: center; padding:10px} $(function() { $("#draggable").draggable({ start: function() { $("#draggable").text("Перетаскивание...") }, stop: function() { $("#draggable").text("Перетащи меня") } }); }); Перетащи меня Запустить пример

  В этом примере события start и stop используются для изменения текстового содержимого элемента в процессе перетаскивания. Эта благоприятная возможность является следствием того, что взаимодействие Draggable реализовано исключительно с использованием средств HTML и CSS: можно использовать jQuery для изменения состояния перемещаемого элемента даже в то время, когда он движется по экрану.

  Использование взаимодействия Droppable

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

  Элементы, к которым было применено взаимодействие Droppable (принимающие элементы), приобретают способность принимать перемещаемые элементы, созданные с помощью взаимодействия Draggable.

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

  События взаимодействия Droppable Событие Описание

  create	Происходит в момент применения взаимодействия Droppable к элементу
  activate	Происходит, когда пользователь начинает перетаскивать перемещаемый элемент
  deactivate	Происходит, когда пользователь прекращает перетаскивать перемещаемый элемент
  over	Происходит, когда пользователь перетаскивает перемещаемый элемент над принимающим элементом (но при условии, что кнопка мыши еще не была отпущена)
  out	Происходит, когда пользователь перетаскивает перемещаемый элемент за пределы принимающего элемента
  drop	Происходит, когда пользователь оставляет перемещаемый элемент на принимающем элементе

  Пример создания простого принимающего элемента, для которого определен единственный обработчик события drop, приведен ниже:

  ... #draggable, #droppable {font-size: large; border: thin solid black; padding: 10px; width: 100px; text-align: center; background-color: lightgray; margin: 4px;} #droppable {padding: 20px; position: absolute; right: 5px;} $(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function() { $("#draggable").text("Оставлено") } }); }); Оставь здесь Перетащи меня Запустить пример

  В этом примере в документ добавлен элемент div, текстовое содержимое которого представлено строкой "Оставь здесь". Мы выбираем этот элемент, используя jQuery, и вызываем метод droppable(), передавая ему объект с настройками, который определяет обработчик для события drop. Ответом на это событие является изменение текста перемещаемого элемента с помощью метода text().

  Создаваемое в данном примере интерактивное взаимодействие категории Drag-and-drop является простейшим, но оно создает удобный контекст для объяснения возможностей совместной работы взаимодействий Draggable и Droppable. Различные стадии процесса перетаскивания элементов проиллюстрированы на рисунке:

  

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

  Подсветка целевого принимающего объекта

  Используя события activate и deactivate, можно подсветить целевой принимающий объект, когда пользователь начинает процесс перетаскивания элемента. Во многих ситуациях эта идея оказывается весьма плодотворной, поскольку при этом пользователь получает надежное указание относительно того, какие элементы являются частью модели Drag-and-drop. Соответствующий пример приведен ниже:

  ... $(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function() { $("#draggable").text("Оставлено") }, activate: function() { $("#droppable").css({ border: "medium double green", backgroundColor: "lightGreen" }); }, deactivate: function() { $("#droppable").css("border", "").css("background-color", ""); } }); }); ... Запустить пример

  Как только пользователь начинает перетаскивать элемент, срабатывает событие activate - связанное с нашим принимающим элементом, и функция-обработчик использует метод css() для изменения CSS-свойств border и background-color этого элемента. В результате целевой принимающий элемент подсвечивается, указывая пользователю на существование связи между ним и перемещаемым элементом.

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

  

  Обработка перекрывания элементов

  Технологию Drag-and-drop можно усовершенствовать, добавив в нее обработку событий over и out. Событие over происходит, когда 50% перемещаемого элемента оказывается над любой частью принимающего элемента. Событие out наступает тогда, когда перекрывавшиеся ранее элементы перестают перекрываться. Пример ответной реакции на эти события приведен ниже:

  $(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function() { $("#draggable").text("Оставлено") }, activate: function() { $("#droppable").css({ border: "medium double green", backgroundColor: "lightGreen" }); }, deactivate: function() { $("#droppable").css("border", "").css("background-color", ""); }, over: function() { $("#droppable").css({ border: "medium double red", backgroundColor: "red" }); }, out: function() { $("#droppable").css("border", "").css("background-color", ""); } }); }); Запустить пример

  Здесь использованы те же функции-обработчики, что и в предыдущем примере, но в данном случае они связаны с событиями over и out. Когда с принимающим элементом перекрывается по крайней мере 50% перемещаемого элемента, он заключается в рамку и цвет его фона изменяется, как показано на рисунке:

  

  Указанный 50%-ный предел называется порогом перекрывания (tolerance) , величину которого можно задавать при создании принимающего элемента, как будет показано далее.

  Настройка взаимодействия Droppable

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

  Свойства взаимодействия Droppable Свойство Описание

  disabled	Если эта опция равна true, то функциональность взаимодействия Droppable первоначально отключена. Значение по умолчанию - false
  accept	Сужает множество перемещаемых элементов, на которые будет реагировать принимающий элемент. Значение по умолчанию - *, ему соответствует любой элемент
  activeClass	Определяет класс, который будет присваиваться в ответ на событие activate и удаляться в ответ на событие deactivate
  hoverClass	Определяет класс, который будет присваиваться в ответ на событие over и удаляться в ответ на событие out
  tolerance	Определяет минимальную степень перекрывания, при которой происходит событие over

  Ограничение допустимых перемещаемых элементов

  Можно ограничить множество перемещаемых элементов, которые будут приниматься элементом, наделенным функциональностью взаимодействия Droppable, с помощью опции accept. В качестве значения опции accept следует присвоить селектор. В результате этого события взаимодействия Droppable будут происходить лишь в том случае, если перемещаемый элемент соответствует указанному селектору. Соответствующий пример приведен ниже:

  ... .draggable, #droppable {font-size: large; border: thin solid black; padding: 10px; width: 100px; text-align: center; background-color: lightgray; margin: 4px;} #droppable {padding: 20px; position: absolute; right: 5px;} $(function() { $(".draggable").draggable(); $("#droppable").droppable({ drop: function(event, ui) { ui.draggable.text("Оставлено") }, activate: function() { $("#droppable").css({ border: "medium double green", backgroundColor: "lightGreen" }); }, deactivate: function() { $("#droppable").css("border", "").css("background-color", ""); }, accept: "#drag1" }); }); Оставь здесь Элемент 1 Элемент 2 Запустить пример

  В этом примере есть два перемещаемых элемента с идентификаторами drag1 и drag2. При создании принимающего элемента используется опция accept, с помощью которой мы указываем, что приемлемым перемещаемым элементом будет только элемент drag1.

  При перетаскивании элемента drag1 вы будете наблюдать тот же эффект, что и в предыдущих примерах. В соответствующие моменты для принимающего элемента будут запускаться события activate, deactivate, over и out. В то же время, если перетаскивать элемент drag2, который не соответствует указанному в параметре accept селектору, то эти события запускаться не будут. Этот элемент можно свободно перемещать, но он не будет восприниматься принимающим элементом.

  Обратите внимание на изменение способа выбора приемлемого перемещаемого элемента, для которого следует вызывать метод text(). Когда в документе был всего лишь один перемещаемый элемент, для этого хватало атрибута id:

  Drop: function() { $("#draggable").text("Оставлено") },

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

  Выход состоит в том, чтобы использовать объект ui, который jQuery UI предоставляет в качестве дополнительного аргумента каждому обработчику событий. Свойство draggable объекта ui возвращает объект jQuery, содержащий элемент, который пользователь перетаскивает или пытается оставить на целевом элементе, что позволяет выбрать требуемый элемент следующим образом:

  Drop: function(event, ui) { ui.draggable.text("Оставлено") },

  Изменение порога перекрывания

  По умолчанию событие over происходит лишь в тех случаях, когда по крайней мере 50% перемещаемого элемента перекрывается с принимающим элементом. Величину этого порогового перекрывания можно изменить с помощью опции tolerance, которая может принимать значения, указанные в таблице ниже:

  Чаще всего я использую два значения, fit и touch, поскольку их смысл наиболее понятен для пользователей. Значение fit используется мною в тех случаях, когда перетаскиваемый элемент должен остаться в той области принимающего элемента, в которую он был перемещен, а значение touch - когда перемещенный элемент должен вернуться в исходную позицию (соответствующий пример будет приведен далее). Пример использования параметров fit и touch приведен ниже:

  Значение clone указывает jQuery UI на то, что необходимо создать копию перемещаемого элемента вместе со всем его содержимым и использовать полученный результат в качестве вспомогательного элемента. Результат представлен на рисунке:

  

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

  Как показано на рисунке, исходный перемещаемый элемент остается на своем месте и лишь вспомогательный элемент перемещается по экрану вслед за указателем мыши. Если размеры перемещаемого элемента велики, как в нашем примере, то он закрывает собой остальные элементы документа, так что даже отследить позицию принимающего элемента пользователю будет трудно. С этой проблемой можно справиться, предоставив функцию в качестве значения опции helper, как показано в примере ниже:

  ... $(function() { $("div.draggable")..png"/>") } }); $("#basket").droppable({ activeClass: "active", hoverClass: "hover" }); }); ... Запустить пример

  Когда пользователь начинает перетаскивать элемент, jQuery UI вызывает функцию, заданную параметром helper, и использует возвращаемый элемент в качестве перемещаемого объекта. В данном случае я использую jQuery для создания элемента img. Результат представлен на рисунке:

  

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

  Объект ui, который jQuery UI передает событиям взаимодействия Droppable, содержит свойство helper, и это свойство можно использовать для манипуляций вспомогательным элементом в процессе его перетаскивания. Пример использования этого свойства в связке с событиями over и out приведен ниже:

  ... $(function() { $("div.draggable")..png"/>") } }); $("#basket").droppable({ activeClass: "active", hoverClass: "hover", over: function(event, ui) { ui.helper.css("border", "thick solid #27e6ed") }, out: function(event, ui) { ui.helper.css("border", "") } }); }); ...

  Здесь события over и out, а также свойство ui.helper используются для отображения рамки вокруг вспомогательного элемента, когда он перекрывает принимающий элемент. Результат представлен на рисунке:

  

  Привязка к краям элементов

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

  Запустить пример jQuery UI #snapper, .draggable, .droppable {font-size: large; border: medium solid black; padding: 4px; width: 150px; text-align: center; background-color: lightgray; margin-bottom: 10px;} .droppable {margin-right: 5px; height: 50px; width: 120px} #dropContainer {position: absolute; right: 5px;} div span {position: relative; top: 25%} .droppable.active {border: medium solid green} .droppable.hover {background-color: lightgreen} #snapper {position: absolute; left: 35%; border: medium solid black; width: 180px; height: 50px} $(function() { $("div.draggable").draggable({ snap: "#snapper, .droppable", snapMode: "both", snapTolerance: 50 }); $("#basket").droppable({ activeClass: "active", hoverClass: "hover" }); }); Корзина Привяжись здесь Перетащи меня

  Когда перемещаемый элемент приближается к одному из подходящих элементов, он как бы "притягивается" к нему таким образом, что их соседние края соприкасаются. Для такой привязки можно выбрать любой элемент, а не только принимающий. В этом примере я добавил элемент div и определил для опции snap значение, которое выбирает в документе данный элемент, а также принимающий элемент.

  Существует пара вспомогательных опций, позволяющих более точно настроить поведение элементов в отношении привязки. Одна из них - это опция snapMode . С ее помощью можно указать тип привязки. Допускаются следующие значения: inner (привязка к внутренним краям элементов), outer (привязка к внешним краям элементов) и both (привязка ко всем краям; используется по умолчанию).

  Опция snapTolerance позволяет указать, на какое расстояние должен приблизиться перемещаемый элемент к краю элемента-мишени, прежде чем произойдет привязка. Значение по умолчанию - 20, что означает 20 пикселей. В примере используется значение 50, которому соответствует привязка на большем расстоянии. Очень важно правильно выбрать значение этой опции. Если значение опции snapTolerance слишком мало, то пользователь может не заметить эффекта привязки, а если оно слишком велико, то перемещаемый элемент начнет совершать неожиданные скачки, привязываясь к далеко расположенным элементам.

  Бывают случаи, когда вам может понадобиться создать перетаскиваемый элемент внутри вашего веб-приложения. Это отличная функциональность, однако, возможно вы хотите, чтобы элемент оставался на новом месте, после перетаскивания. В сегодняшней статье вы узнаете, как можно легко перетаскивать и закреплять в новом месте нужный элемент даже после перезагрузки страницы, с помощью захвата и хранения его 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: