Jquery Draggable 不适用于动态内容

Question

我一直在尝试构建一个内容自动生成且必须可拖动的 CMS。为此，我使用 Jquery UI 使元素移动到其他位置。

问题是当我动态生成内容时，jquery 的可拖动功能不起作用。我使用 Jquery 动态生成了一些 div，我希望这些 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动态内容怎么制作？

Answer 1

每次添加元素时，再次初始化draggable。

$("#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();

Answer 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'/>