jQuery сортируется во вложенном элементе - PullRequest
Новая
       8

jQuery сортируется во вложенном элементе

0 голосов
/ 08 октября 2018

У меня есть список с категориями и вопросами (которые могут быть добавлены динамически), на данный момент я могу сортировать категории, используя сортируемую jQuery, но не вопросы под категориями.

I 'мы пытались просто добавить еще одну функцию .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 (поэтому я не могу перетащить вопрос из одной категории в другую, но только в пределах своей категории).

1 Ответ

0 голосов
/ 09 октября 2018

Первое, что я заметил в вашем коде, это то, что идентификатор повторяется для каждого создания динамического элемента.Это вызовет много проблем, когда у вас будет 6 #question элементов.Эту проблему можно решить, добавив идентификатор к элементу при его создании и создав уникальный идентификатор.Например, если есть 0 #questions, то вы можете посчитать это и добавить 1. 

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

В этом id будет 2. есть один элемент, который содержит «вопрос» и *Селектор 1007 * будет искать его до - в имени 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>

Надеюсь, это поможет.

...