将项目添加到可排序

Question

我将使用jqueru ui和sortable，但我犯了一些愚蠢的错误，无法更改由“ entry-add”项添加的项。

演示： https : //jsfiddle.net/7p0w1gpe/3/

$(function() {
  $('.test').sortable({
    connectWith: ".test"    
  }).disableSelection();
});

Answer 1

您正在将connectWith应用于测试类已存在的div。 当您添加带有类test的新div并使它可排序时，您会忘记同时添加connectWith。

我在下面的小提琴中添加了它。

https://jsfiddle.net/ksxLymox/

  $(function() {
$('.test').sortable({
  connectWith: ".test",

}).disableSelection();
  });

  $(document).on('click', '.add-done', function() {
    $('<div id="sortable1" class="test connectedSortable"><a class="ui-state-default">Item 1</a></div>').insertBefore('.add-done').sortable({connectWith: ".test"});
    console.log("add");
  });

  $(document).on('click', '.entry-add', function() {
    $(this).parent().find('.test').append('<a href="#">new items</a>').sortable({connectWith: ".test"});
  });

为了使代码更好，您可以重用一个函数使div可排序。