如何在特定元素上触发.sortable

Question

我有一个包含类别的问题列表，可以在每个类别中添加问题。

类别是可排序的（它们的整个wrap元素），但是现在我想使每个类别中的问题也可以排序。我的问题是整个元素都是可排序的，因此无论我用鼠标拖动到哪里，它都会对整个类别进行排序。

我可以通过使类别仅使用特定的按钮或图标排序来解决此问题。我该怎么办？

我这样尝试过：

$('#dynamic_field').sortable({
    items: '.dragndrop'
  });

但这只会使图标可排序，这不是我想要的。

我的代码：

// 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">
    <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');
  $('#dynamic_field').sortable();
});

我希望能够仅使用以下按钮来拖动元素：