动态添加+删除div中的可排序div

Question

我正在尝试在动态添加+删除 div 中添加可排序选项

$('.add').click(function() {
  $('.added:last').after('<div class="addedline col-md-12"><div class="row"><div class="sort d-flex align-items-center"><i class="fa fa-bars"></i></div><div class="col-md-3 col-sm-12"><label>Item Name</label><input class="form-control"></div><div class="col-md-4 col-sm-12"><label>Description</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Size</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Quantity</label><input class="form-control"></div><div class="col-md-2 col-sm-12 remove"><input type="button" class="btn btn-info" value="Remove" /></div></div></div>');
});
$('.optionBox').on('click','.remove',function() {
  $(this).parent().remove();
});
(function() {
  $( "#sortable" ).sortable();
});

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionBox">
  <div class="added col-md-12">
    <span class="add"><input type="button" class="btn btn-info" value="+ Add Items" /></span>
  </div>
</div>

它在独立的 div 中工作，但不在选项框中

Answer 1

你必须稍微修改你的代码

您必须在每个创建的 div 上添加 sortable

如下所示：-

$('.add').click(function() {
  $('.added:last').append('<div class="addedline col-md-12"><div class="row"><div class="sort d-flex align-items-center"><i class="fa fa-bars"></i></div><div class="col-md-3 col-sm-12"><label>Item Name</label><input class="form-control"></div><div class="col-md-4 col-sm-12"><label>Description</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Size</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Quantity</label><input class="form-control"></div><div class="col-md-2 col-sm-12 remove"><input type="button" class="btn btn-info" value="Remove" /></div></div></div><br>');
  $('.optionBox').sortable({
    items: ".addedline"
  });
});
$('.optionBox').on('click', '.remove', function() {
  $(this).parent().remove();
});

工作小提琴：- https://jsfiddle.net/vh1y5cek/

参考：-Jquery sortable on dynamically created divs

注意：- 您需要更改删除代码，如下所示：-

$('.optionBox').on('click', '.remove', function() {
  $(this).closest('.addedline').remove();
});

Answer 2

您的代码运行良好。您只需要删除旧版本的 1.12.0 脚本。

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

$('.add').click(function() {
  $('.added:last').after('<div class="addedline col-md-12"><div class="row"><div class="sort d-flex align-items-center"><i class="fa fa-bars"></i></div><div class="col-md-3 col-sm-12"><label>Item Name</label><input class="form-control"></div><div class="col-md-4 col-sm-12"><label>Description</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Size</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Quantity</label><input class="form-control"></div><div class="col-md-2 col-sm-12 remove"><input type="button" class="btn btn-info" value="Remove" /></div></div></div>');
});
$('.optionBox').on('click','.remove',function() {
  $(this).parent().remove();
});
(function() {
  $( "#sortable" ).sortable();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionBox">
  <div class="added col-md-12">
    <span class="add"><input type="button" class="btn btn-info" value="+ Add Items" /></span>
  </div>
</div>