Question

使用此代码列表既不可排序，也不能使用connectedSortable：

$("#button1").click(function(){
     $("<ul />", {
       class: "dynamic sortable_list  connectedSortable", 
       //connectWith: ".connectedSortable",
       text: " Section "+counter,
       id:  counter++
      }).resizable().draggable().addClass("draggable").css('background-color', getColor())
        .sortable()
        .append('<br /><input type="button" class="removeButton" value="Remove"/>')
        .appendTo("body");
    });

Answer 1

根据你的评论，我现在做了一些小改动，看看它是如何被使用的。

示例：https://jsfiddle.net/qdt2gp64/1/

订单或操作在这里很重要。最好在初始化可排序和可拖动之前追加。此外，初始化新的sortable时，还需要填充connectWith选项。

<强>的JavaScript

  $("#button1").click(function() {
    $("<ul />", {
        class: "dynamic sortable_list connectedSortable",
        text: " Section " + counter,
        id: "Section" + counter++
      })
      .append('<br /><input type="button" class="removeButton" value="Remove"/>')
      .appendTo("body")
      .sortable({
        connectWith: ".connectedSortable"
      })
      .draggable();
  });

我现在可以将项目从左侧列表拖动到动态创建的列表中。我可以拖回它的来源。

如何在动态未排序列表中启用可调整大小，可拖动和可排序（使用connectedSortable）

1 个答案: