添加项目以进行排序

Question

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

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

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

Answer 1

您正在将connectWith应用于已存在的具有测试类的div。当您使用类测试添加新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进行排序。