jquery 中动态创建的元素可排序

Question

我的代码是这样的：

$(function  () {
      $("ol.mauDIDROP").sortable({
    group: '.example'
  });
    $("ol.areaDROP").sortable({
    group:  '.example',
    drop: false,
    drag: false,
  });
   $("ol.areaDROP>li>ol").sortable({
      group:  '.example',
      drop: true,

  });
});

演示和完整代码：https://jsfiddle.net/oscar11/15qvta6p/6/

拖放有效

但是如果：

<li>Single Room<ol></ol></li>
      <li>Double Room<ol></ol></li>
      <li>Family Room<ol></ol></li>

我移动到 javascript 以使用这样的追加：https://jsfiddle.net/oscar11/kdf7xngk/1/

拖放操作无效

关于如何解决这个问题有什么建议吗？

谢谢

Answer 1

将您的脚本更改为：

 $(function() {
   $("ol.areaDROP").append("<li>Single Room<ol></ol></li><li>Double Room<ol></ol></li><li>Family Room<ol></ol></li>");
   $("ol.mauDIDROP").sortable({
     group: '.example'
   });
   $("ol.areaDROP").sortable({
     group: '.example',
     drop: false,
     drag: false,
   });
   $("ol.areaDROP>li>ol").sortable({
     group: '.example',
     drop: true,

   });
 });