可排序 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

您的代码运行良好。您只需要删除旧脚本，它是 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>

Answer 2

你得稍微修改一下你的代码

您必须在每个创建的 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();
});

工作fiddle：- https://jsfiddle.net/vh1y5cek/

引用：- Jquery sortable on dynamically created divs

注意：- 您需要像下面这样更改删除代码：-

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

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

Sortable div in dynamic add+remove div

jquery

jquery-ui