Вивчаємо Java. Видалення елемента без руйнування даних: detach(). Видалення елемента повністю: remove()

У цьому уроці розглядаються питання маніпулювання наявними елементами на сторінці:

  • Видалення елементів зі сторінки за допомогою методів 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 (); , if required currentMinutes = (currentMinutes< 10 ? "0" : "") + currentMinutes; currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; return ("

поточний час: " + currentHours + ":" + currentMinutes + ":" + currentSeconds + "

"); } }

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

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

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

Після виконання коду вміст сторінки набуде вигляду:

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

Cьогодні: 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

У цьому уроці ми спробуємо змінити вміст елементів у jQuery.

Отже, найчастіше використовуваною операцією є зміна вмісту елементів. Поза бібліотекою jQuery для цієї мети використовується властивість innerHTML об'єкта document. Наприклад, щоб вставити новий фрагмент елемента з ідентифікатором divl, можна скористатися наступним кодом.

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

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

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());

Також можна обмежити набір за допомогою селектора:

Перший. 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(" Новий текст");

Черговий розділ із книги «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")

Як ви вже напевно здогадалися, встановимо цього ж елементу “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')));

Таким чином ми можемо очистити всі значення інпутів і встановити їх як «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();

В результаті змінна текст міститиме рядок "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() повертає вміст атрибуту значення першого елемента в наборі. Коли елемент форми містить кілька варіантів вибору, повертається масив значень цих варіантів.

    Ця команда, хоч і досить корисна, має низку обмежень. Якщо перший елемент набору не є елементом форми, то отримаємо повідомлення про помилку. Також ця команда не розрізняє зазначені та не зазначені елементи чекбоксів або радіобатонів.

    Для випадку з радіобатоном можна вчинити так:

    $(':checked').val()

    Цей вираз поверне значення єдиного обраного радіобатону з ім'ям radioGroup (або поверне значення undefined якщо жоден радіобатон не був обраний). Цей приклад не може бути застосований до чекбоксів, тому що тут можливо більше одного обраного значення, а як уже говорилося, val() повертає вміст атрибуту value першого елемента набору.

    При передачі команді параметра, він буде встановлений як значення для значення всіх вибраних елементів набору. При цьому знову ж таки є низка обмежень. Наприклад, не можна встановити кілька значень елемента з множинним вибором.

    Ще один напрямок використання val() – встановлення прапорців чекбоксів та радіобатонів або вибір опцій. При цьому передається масив значень, і якщо будь-яке з них збігається зі значенням елемента, елемент буде обраний (позначений). Наприклад:

    $('input,select').val(['one','two','three']);

    Цей вираз перевірить всі елементи та на збіг їх значень з будь-якого з переданих рядків: one, two або three. При збігу значень чекбокси або радіобатони будуть позначені, опція селекту буде вибрано.

    Чергова глава добігла кінця. Знову ж радий здоровій критиці. Дякую.

    Також нагадаю, що цю та інші статті ви завжди зможете знайти

    182

    У цьому прикладі ми вибираємо елемент div і робимо його, що переміщується шляхом виклику для нього методу draggable() . Як показано на малюнку нижче, у документі елемент займає свою звичайну позицію, але після цього його можна перемістити за допомогою покажчика миші в будь-яке місце у вікні браузера:

    Можливість перетягування елементів корисна вже сама по собі, але вона приносить ще більше користі, якщо застосовується у поєднанні із взаємодією Droppable, яка описана далі.

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

    Операції Drag-and-drop, що визначаються специфікацією HTML5 операції, зазвичай реалізуються з використанням власних механізмів операційних систем. Якщо ви використовуєте механізм 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;) : 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;) : 20px; position: absolute; right: 5px;) $(function() ( $(".draggable").draggable(); $("#droppable")). 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;

    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 ); ", "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 CH ;

    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:



ПОХОДЖЕННЯ СТАТТІ