jQuery可在嵌套元素中排序

Question

我有一個包含類別和問題的列表（都可以動態添加），目前我可以使用jQuery sortable對類別進行排序，但不能對類別下面的問題進行排序。

我試過在問題自動換行元素上添加另一個.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是我的category元素的包裝（問題也位於此元素內）。

如何使我的問題也可以分類？ 而且也只能使它們在其父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> 

希望能有所幫助。