Задать вопрос
ruskar
@ruskar
Conflict Intelligence Team
javascript

Drag'n'drop для динамически созданных элементов (jQuery)?

В jQuery есть такой хороший плагин jQuery UI Draggable, который позволяет создавать эффекты drag'n'drop. Работает он достаточно просто: нужно для любого существующего элемента вызвать метод .draggable():

$('#test').draggable();<br>

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

$('body').append('<div id="newblock">Новый элемент</div>');<br>
$('#newblock').draggable();<br>


«Новый элемент» не будет обладать возможностью drag'n'drop. Как сделать тут что-то типо аналога функции .live(), чтобы динамически созданные элементы тоже реагировали на эти методы?
  • Вопрос задан
  • 10256 просмотров
Комментировать
Подписаться 4 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
@Serator 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery UI Example Page</title>
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('body').append('<div id="newblock">Новый элемент</div>');
				$('#newblock').draggable();
			});
		</script>
	</head>
	<body>
		<div>
			:)
		</div>
	</body>
</html>


Все прекрасно работает. Вы бы полнее пример привели.
Ответ написан
1 комментарий
1 комментарий
3ds
@3ds
Лень пробовать, попробуйте livequery (работает при клонировании — добавляет драггабл) Т.к. при клонировании тоже создается элемент динамически и работает, возможно сработает и в вашем случае.
 $(".drag")
   .livequery(function(){ 
        $(this)
         .draggable({
                helper: 'clone',
                opacity: 0.7,
               revert: 'invalid'
          });
    });

примеры: bit.ly/azEmUP
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
JavaScript FullStack разработчик
Rocket • Брянск
от 60 000 до 100 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Подготовить ТЗ для процесса оплаты сервиса через крипту
27 мая 2024, в 13:26
1500 руб./в час
Задача на настройку NAS Synology DS423+
27 мая 2024, в 13:21
2500 руб./за проект
Перенос сайта с Joomla 2.5 на Joomla 5 с сохранением всех SEO-позиций
27 мая 2024, в 13:02
45000 руб./за проект
Ещё заказы