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

每次添加元素时，都要重新初始化可拖动对象。

$("#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'/>

jQuery Draggable不适用于动态内容

2 个答案: