将项目添加到可排序

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 可排序。