jQuery可在嵌套元素中排序

Question

我有一个包含类别和问题的列表（都可以动态添加），目前我可以使用 jQuery 可排序的类别对类别进行排序，但不能对类别下的问题进行排序。

我尝试在问题包装元素上添加另一个 .sortable 函数，但它根本没有响应。

我现在的代码：

// HTML template for new fields
const template = `
<div class="row sortwrap">
  <div class="col-md-8">
    <input type="text" name="category[]" placeholder="" class="form-control name_list catinput" />
    <i class="mdi mdi-sort dragndrop"></i>
  <div class="questionlist questionwrap">
    <div class="row">
      <div class="col-md-8">
        <button class="btn btn-success questionbutton">Extra vraag</button>
        <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" />
      </div>
      <div class="col-md-4">

      </div>
    </div>
    </div>
  </div>
  <div class="col-md-4">
  <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
  </div>
</div>`;

const vraagTemplate = `
<div class="row" id="question">
  <div class="col-md-8">
    <input type="text" name="question[]" class="form-control name_list questioninput" />
  </div>
  <div class="col-md-4">
    <button class="btn btn-danger btn_remove">X</button>
  </div>
</div>`;
// Count numbers and change accordingly when field is deleted
function updatePlaceholders() {
  // Sortable code
// $('#dynamic_field').sortable( "refresh" );
  let df = $('#dynamic_field');
  df.find('input[name^=cat]').each(function(i) {
    $(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
  });
  df.find('.sortwrap').each(function(i) {
    $(this).attr("id", i + 1);
  });
  df.find('.questionlist').each(function() {
    $(this).find('input[name^=qu]').each(function(i) {
      $(this).attr("placeholder", i + 1 + ". Voeg een vraag toe");
    });
  });
}
// Append question template
$('#dynamic_field').on('click', '.questionbutton', function() {
  let $ql = $(this).closest('.questionlist');
  $ql.append($(vraagTemplate));
  updatePlaceholders();
});

// Delete
$('#dynamic_field').on('click', '.btn_remove', function() {
  $(this).closest('.row').remove();
  updatePlaceholders();
});
$('#addcategory').on('click', function() {
let t = $(template)
  $('#dynamic_field').append(t);
  updatePlaceholders();
});

$(function() {
  $('#addcategory').trigger('click');
  $('#question').sortable();
  $('#dynamic_field').sortable({
    cancel: '.questionwrap',
    placeholder: "ui-state-highlight"
  });

});

这是我的可排序代码：

$(function() {
    $('#addcategory').trigger('click');
    $('#question').sortable();
    $('#dynamic_field').sortable({
    cancel: '.questionwrap',
    placeholder: "ui-state-highlight"
});

#question 是我的问题列表的包装，#dynamic_field 是我的类别元素的包装（问题也在此元素内）。

如何使我的问题也可排序？并且只能在其父 div 中进行排序（因此我不能将问题从一个类别拖到另一个类别，而只能在其自己的类别中）。

Answer 1

我注意到您的代码的第一件事是，每次创建动态元素时都会重复 ID。当您有 6 个 #question 元素时，这将导致很多问题。这可以通过在创建元素时将 ID 添加到元素并创建唯一 ID 来解决。例如，如果有 0 个#questions，那么您可以数数并加 1。

<div id="question-1"></div>
<script>
var id = $("[id|='question']").length + 1;
</script>

在此，id 将是 2。有一个元素包含“问题”，|= 选择器将在 ID 名称中的 - 之前查找它。也可以使用^= 选择器。

使用handle 也会有很大帮助。这将有助于对嵌套项与其父项进行正确排序。 containment 在这里也很有帮助，除非您想在列表之间移动它们。

考虑以下代码。这有点笨拙，我希望你能明白我指的是什么。

$(function() {
  function makeSortable(obj, options) {
    console.log("Make Sortable", obj);
    obj.sortable(options);
    obj.disableSelection();
  }

  function updateSort(obj) {
    console.log("Update Sortable", obj);
    obj.sortable("refresh");
  }

  function addQuestion(q, c) {
    console.log("Add Question", q, c);
    var makeSort = $("[id|='question']", c).length === 0;
    var question = $("<div>", {
      class: "question",
      id: "question-" + ($("div[id|='question']", c).length + 1)
    });
    question.append($("<div>", {
      class: "col-md-8"
    }).html(q));
    question.append($("<div>", {
      class: "col-md-4"
    }).html("<button class='btn btn-danger btn-remove'>X</button>"));
    question.appendTo($(".catcontent", c));
    console.log(makeSort, question, c);
    if (makeSort) {
      makeSortable($(".catcontent", c), {
        containment: "parent",
        items: "> div.question"
      });
    } else {
      updateSort($("[id|='question']", c).eq(0).parent());
    }
  }

  function makeCategory(name) {
    console.log("Make Category", name);
    var makeSort = $("[id|='category']").length === 0;
    var cat = $("<div>", {
      class: "category ui-widget",
      id: "category-" + ($("[id|='category']").length + 1)
    });
    cat.append($("<div>", {
      class: "cathead ui-widget-header"
    }).html(name + "<i class='btn btn-add-question'>+</i>"));
    cat.append($("<div>", {
      class: "catcontent ui-widget-content col-md-8"
    }));
    cat.appendTo($("#cat-wrapper"));
    if (makeSort) {
      makeSortable($("#cat-wrapper"), {
        handle: ".cathead",
        items: "> div.category"
      });
    } else {
      updateSort($("#cat-wrapper"));
    }
  }

  $('#addcategory').on('click', function() {
    let t = $(template);
    $('#dynamic_field').append(t);
    updatePlaceholders();
  });

  $(".categorybutton").click(function(e) {
    e.preventDefault();
    makeCategory($(".catinput").val());
    $(".catinput").val("");
  });

  $(".catwrap").on("click", ".btn-add-question", function(e) {
    e.preventDefault();
    var resp = prompt("Question to Add:");
    addQuestion(resp, $(this).parent().parent());
  });

});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row sortwrap">
  <div class="col-md-8">
    New Category
    <input type="text" class="form-control catinput" placeholder="Category Name" />
  </div>
  <div class="col-md-4">
    <button class="btn btn-success categorybutton">Add</button>
  </div>
</div>
<div id="cat-wrapper" class="row catwrap">
</div>

希望对您有所帮助。