JQuery Draggable не работает для динамического контента
Я пытался создать CMS, в которой содержимое создается автоматически, и его нужно перетаскивать. Для этого я использовал пользовательский интерфейс JQuery, чтобы элементы перемещались в другие позиции.
Проблема в том, что когда я генерирую контент динамически, перетаскиваемые функции jquery не работают. Я сгенерировал некоторые div динамически с помощью Jquery, и я хочу, чтобы эти div можно было перетаскивать, но когда я пытаюсь сделать это с помощью jquery, содержимое не перемещается.
Если контент не создается динамически (статический контент), перетаскивание работает.
Это мой код JQuery:
$("#btnAddTextsBlog").click(function() {
var texts = $("#blog_text").val();
var content2 = "<div id='text1' class='ui-widget-content' style='float: left; margin-left: 30px; margin-right: 30px; margin-top: 30px; display: block;'><p style='font-size: 18px;'>" + texts + "</p></div>";
$("#main_col_blog_results").append(content2);
});
$(".ui-widget-content").draggable();
КОД HTML:
<div class = "row" id = "main_row_blog_results">
<div class = "col-md-12" id = "main_col_blog_results">
</div>
</div>
Я хочу сделать динамическое содержимое страницы draggable, какие-либо предложения относительно того, где может быть ошибка? Как можно было создать динамический контент draggable?
Ответы 2
При генерации div добавьте класс draggable после добавления.
var content2 = "<div id='text1' class='ui-widget-content draggable' style='float: left; margin-left: 30px; margin-right: 30px; margin-top: 30px; display: block;'><p style='font-size: 18px;'>"+texts+"</p></div>";
Или альтернативно используйте .draggable() при каждом добавлении. Рабочий пример ниже.
var content2 = "<div id='text1' class='ui-widget-content draggable' style='float: left; margin-left: 30px; margin-right: 30px; margin-top: 30px; display: block;'><p style='font-size: 18px;'>"+texts+"</p></div>";
$("#btnAddTextsBlog").click(function() {
var texts = 'Test Val';
var content2 = "<div id='text1' class='ui-widget-content' style='float: left; margin-left: 30px; margin-right: 30px; margin-top: 30px; display: block;'><p style='font-size: 18px;'>" + texts + "</p></div>";
$("#main_col_blog_results").append(content2).draggable();
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div id='main_col_blog_results'></div>
<input type='button' id='btnAddTextsBlog' value='Test Button'/>Спасибо за Ваш ответ. но это не работает. Я добавил перетаскиваемый, но все еще не работает
Каждый раз, когда вы добавляете элемент, снова инициализируйте перетаскиваемый элемент.
$("#btnAddTextsBlog").click(function() {
var texts = $("#blog_text").val();
var content2 = "<div id='text1' class='ui-widget-content' style='float: left; margin-left: 30px; margin-right: 30px; margin-top: 30px; display: block;'><p style='font-size: 18px;'>" + texts + "</p></div>";
$("#main_col_blog_results").append(content2);
$(".ui-widget-content").draggable(); // initialize again
});
$(".ui-widget-content").draggable();
Вы должны повторно запустить перетаскивание новых элементов. Если вы запустите его один раз, он не будет запускаться снова, пока вы не создадите для него скрипт.