Вам знадобиться застосувати ефект draggable() до будь-якого новоствореного елемента безпосередньо перед або відразу після додавання його до вашого HTML. Ось як може виглядати ваш обробник кліків: var toAdd = $('input[name=annotateItem]'). val(); // (1) створити новий елемент var $item = $('<div class="note"/>').
Щоб зробити об’єкт перетягуваним, встановити draggable=true для цього елемента. Перетягувати можна майже все, включаючи зображення, файли, посилання, файли або будь-яку розмітку на вашій сторінці.
jQueryUI надає метод draggable(), щоб зробити будь-який елемент DOM доступним для перетягування. Коли елемент можна перетягувати, ви можете переміщувати його, клацнувши на ньому мишею та перетягнувши будь-де в межах вікна перегляду.
У нас є повний приклад нижче, і ми використовуємо зображення як елемент, який можна перетягувати.
- $(".drag_drop_object"). перетягувати ();
- $(".drag_drop_object"). draggable({ containment: "parent" });
- $("#drag_drop_object"). draggable({ cursor: "hand" });
- $("#drag_drop_object"). перетягувати (); $("#drag_drop_object"). …
- <! …
- <!
Дізнайтеся, як створити елемент DIV з можливістю перетягування за допомогою HTML, CSS і JavaScript
- Крок 1. Створіть перетягуваний елемент DIV у HTML. Ми починаємо цей проект із налаштування файлу HTML. …
- Крок 2: Стилізуйте перетягуваний елемент DIV за допомогою CSS. …
- Крок 3: додавання функціональності до перетягуваного елемента DIV за допомогою JavaScript.
Ось кроки:
- Створіть структуру HTML: <! …
- Створіть CSS для стилізації: body, html { height: 100%; запас: 0; } #resizableDiv { border: 1px solid #ccc; змінити розмір: обидва; перелив: авто; ширина: авто; min-width: 100px; /* Вкажіть мінімальну ширину */ min-height: 50px; /* Вкажіть мінімальну висоту */ }