如何使插入的项目可排序

Question

$('.parent').sortable({
	containment: "parent",
	tolerance: "pointer",
	axis: "x"
 });
 
 $('button').on('click', function(){
 var str = $('#store').html();
 $(str).insertBefore($('.parent').eq(0));
 });

.parent{
background:silver;
margin:9px 0;
}
.title{
background:gold;
display:inline-block;
width:25%;
cursor:cell;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id='store'>
<div class='parent'>
<div class='title'>lorem</div>
<div class='title'>ipsum</div>
</div>
</div>
<br>
<button>CLICK</button>

如何使插入的项目可排序？

我尝试了所有解决方案here和here和...

什么都没有。

Answer 1

添加项目时，您需要运行refresh：

  

刷新可排序项目。触发所有可排序项目的重新加载，导致新项目被识别。

关于位置，您似乎选择了更多所需的东西。我怀疑您只需要在同一列表中插入更多项目即可。请考虑以下内容：

$(function() {
  $('.parent').sortable({
    containment: "parent",
    tolerance: "pointer",
    axis: "x"
  });

  $('button').on('click', function() {
    var str = $('#store .parent').html();
    $(str).insertBefore($('.parent div:eq(0)'));
    $('.parent').sortable("refresh");
  });
});

.parent {
  background: silver;
  margin: 9px 0;
}

.title {
  background: gold;
  display: inline-block;
  width: auto;
  cursor: cell;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id='store'>
  <div class='parent'>
    <div class='title'>lorem</div>
    <div class='title'>ipsum</div>
  </div>
</div>
<br>
<button>CLICK</button>

如果需要新列表，则需要添加它，然后将可排序项重新分配给新项目。

$(function() {
  $('.parent').sortable({
    containment: "parent",
    tolerance: "pointer",
    axis: "x"
  });

  $('button').on('click', function() {
    var str = $('#store .parent:last').prop("outerHTML");
    $(str).insertBefore($('.parent:eq(0)'));
    $("#store .parent").sortable({
      containment: "parent",
      tolerance: "pointer",
      axis: "x"
    });
  });
});

.parent {
  background: silver;
  margin: 9px 0;
}

.title {
  background: gold;
  display: inline-block;
  width: 25%;
  cursor: cell;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id='store'>
  <div class='parent'>
    <div class='title'>lorem</div>
    <div class='title'>ipsum</div>
  </div>
</div>
<br>
<button>CLICK</button>

希望有帮助。