Javascript jQuery UI可调整大小的函数不适用于动态div

当我使静态（意味着在HTML中复制和分页div代码）开始工作时，jQueryUI中的可调整大小的函数不能使用动态div。为什么?

$(function(){
  $("#textTemplate").draggable({
    zIndex: 2500,
    helper: 'clone',
  });

  $("#editorDesignView").droppable({
    accept: '#textTemplate',
    drop: function(event, ui) {
      var html = '<div id="" class="resize" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;" onclick="$(this).focus();">Add your text here.</p></div>';
      $(html).appendTo(this).hide().slideDown();
      var currentHtml = $("#editor").val();       
      $("#editor").val(currentHtml+html);
    }
  });

  $('#editorDesignView').sortable();

  $('#editorBlock div#editorDesignView div#sortable_elements').resizable();
});

$（函数（）{
$（“#文本模板”）.draggable({
zIndex:2500，
助手：“克隆”，
});
$（“#editorDesignView”）。可拖放({
接受：“#文本模板”，
drop：函数（事件、用户界面）{
var html='
在此处添加文本。
；
$（html）.appendTo（this.hide（）.slideDown（）；
var currentHtml=$（“#编辑器”）.val（）；
$（“#编辑器”）.val（当前html+html）；
}
});
$（'#editorDesignView'）.sortable（）；
$（'#editorBlock div#editorDesignView div#sortable_elements'）。可调整大小（）；
});

您应该在动态创建的div的拖放完成后初始化resize函数，如下所示：

$(function(){
  $("#textTemplate").draggable({
    zIndex: 2500,
        helper: 'clone',
  });
  $( "#editorDesignView" ).droppable({
    accept: '#textTemplate',
      drop: function( event, ui ) {
        var html = '<div id="" class="resize" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;" onclick="$(this).focus();">Add your text here.</p></div>';
  $(html).appendTo(this).hide().slideDown();
  var currentHtml = $("#editor").val();       
  $("#editor").val(currentHtml+html);
  $('#editorDesignView').sortable();
  $( '#editorBlock div#editorDesignView div.resize' ).resizable();
      }
    });
});

$（函数（）{
$（“#文本模板”）.draggable({
zIndex:2500，
助手：“克隆”，
});
$（“#editorDesignView”）。可拖放({
接受：“#文本模板”，
drop：函数（事件、用户界面）{
var html='
在此处添加文本。
；
$（html）.appendTo（this.hide（）.slideDown（）；
var currentHtml=$（“#编辑器”）.val（）；
$（“#编辑器”）.val（当前html+html）；
$（'#editorDesignView'）.sortable（）；
$（'#editorBlock div#editorDesignView div.resize'）。resizeable（）；
}
});
});

---

静态HTML中的那些div通过

（'#editorBlock div#editorDesignView div#sortable_elements'）。可调整大小（）

就在页面成功加载之后

过了一段时间，您创建了一些新的div，但这些新div将永远不会使用可调整大小的属性激活

您需要在

$（“#editorDesignView”）.dropable（{…}）

通过添加

.sortable（）

.resizeble（）

线下

---

$（“#编辑器”）.val（当前html+html）（仅在本例中）
是否有必要像您所说的那样将sortable元素保留在dropable函数中。我只是在谈论resizeble（）的sortable（），我可以understand@user7791702哦很抱歉对于sortable，我认为您不需要这样做。因为
$（'#editorDesignView'）
的工作原理类似于一个容器，该容器在页面加载后被可排序属性激活。