Jquery Draggable не работает для динамического контента - PullRequest
Новая
       10

Jquery Draggable не работает для динамического контента

0 голосов
/ 19 декабря 2018

Я пытался создать CMS, в которой содержимое генерируется автоматически и должно быть перетаскиваемым.Для этого я использовал Jquery UI, чтобы элементы перемещались в другие позиции.

Проблема в том, что когда я генерирую контент динамически, перетаскиваемая функциональность 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? 1015 *

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Каждый раз, когда вы добавляете элемент, снова инициализируйте перетаскивание. 

$("#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();
0 голосов
/ 19 декабря 2018

При генерации 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'/>
...