如何使插入的项目可排序

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>

希望对您有所帮助。