Draggable div не работает, если создан Ajax

Question

Draggable div не работает, если создан Ajax

Я использую jQuery и Ajax для загрузки нескольких div в прокручиваемый div («letterHolder»):

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$(".letterHolder").html(result['letter_array']);
}
});
</script>
</head>

<body>

<div class="letterHolder">
</div>

</body>
</html>

PHP-скрипт извлекает список имен файлов из базы данных и загружает их в letterHolder, так что в итоге он выглядит следующим образом:

<div class="letterHolder">
<div class="drag_letter">file1</div>
<div class="drag_letter">file2</div>
<div class="drag_letter">file3</div>
etc.
</div>

Теперь я хочу сделать эти имена файлов перетаскиваемыми, но это не работает:

$(".drag_letter").draggable({
cursor: 'move',
revert: true,
helper: 'clone'
});

Это не работает, если я помещаю перетаскиваемый код в заголовок страницы, и не работает, если я помещаю код в конец страницы.

Это работало нормально, прежде чем я попытался создать div с помощью Ajax.

1

ajax draggable jquery php

Решение

Другие решения

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

2

Источник

Accepted Answer

Использование jQuery или java-скрипта append() функция для добавления DOM в элемент вместо html ()
добавлять draggable после добавления элементов

вы должны отправить имена файлов, как file1… file2… как массив Json с сервера

и переписать это:

<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$.each(result,function(k,v){
$(".letterHolder").append($('<div></div>').html(v).addClass('drag_letter').draggable({
cursor: 'move',
revert: true,
helper: 'clone'
}));
});
}
});
</script>

0