как сделать вставляемые элементы сортируемыми - PullRequest
Новая
       10

как сделать вставляемые элементы сортируемыми

0 голосов
/ 13 декабря 2018 

$('.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>

Как сделать вставляемые элементы сортируемыми?

Я перепробовал все решения здесь и здесь и ...

Ничего не работает.

1 Ответ

0 голосов
/ 13 декабря 2018

При добавлении элементов необходимо запустить 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>

Надеюсь, что поможет.

...