Jquery 可拖动不适用于动态内容

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

生成div时，在追加后添加classdraggable。

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

Answer 2

每次添加元素时，再次初始化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();

Jquery 可拖动不适用于动态内容

Jquery Draggable does not work for dynamic content

html

css

jquery

jquery-ui

jquery-ui-draggable