Question

我想用动态追加的目标元素更新jQuery Sortable。

我使用过这个库。

jQuery可排序库：https://johnny.github.io/jquery-sortable/

动态添加的目标元素无效。

我该如何解决这个问题？

HTML：

<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>

<button class="addTarget">add Target</button>

<ul class="itemlist">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
</ul>

<div class="targetlist">
  <ul class="target">

  </ul>  
</div>

使用Javascript：

$(".addTarget").on("click", function(event) {
  $(".targetlist").append('<ul class="target"></ul>');
});

$(".target").sortable({
    group: "test",
  pullPlaceholder: false,
    onDrag: function ($item, position, _super, event) {
    $item.css(position);
    },
  onDragStart: function ($item, container, _super, event) {
    if(!container.options.drop) {
      cloneItem = $item.clone().insertAfter($item);
    }
    _super($item, container);
    $item.css("position", "absolute");
    $item.addClass(container.group.options.draggedClass);
    $("body").addClass(container.group.options.bodyClass);
  },
  onDrop: function ($item, container, _super, event) {
    $item.removeClass(container.group.options.draggedClass).removeAttr("style");
    $("body").removeClass(container.group.options.bodyClass);
    if(!container.target.hasClass("target")) {
        $item.remove();
    }
  }
});

$(".itemlist").sortable({
    group: "test",
  drop: false
});

jsFiddle：https://jsfiddle.net/j0Lh3evw/2/

Answer 1

您需要在动态追加的目标元素上调用.sortable()初始值设定项。

var sortableOptions = {
    group: "test",
  pullPlaceholder: false,
    onDrag: function ($item, position, _super, event) {
    $item.css(position);
    },
  onDragStart: function ($item, container, _super, event) {
    if(!container.options.drop) {
      cloneItem = $item.clone().insertAfter($item);
    }
    _super($item, container);
    $item.css("position", "absolute");
    $item.addClass(container.group.options.draggedClass);
    $("body").addClass(container.group.options.bodyClass);
  },
  onDrop: function ($item, container, _super, event) {
    $item.removeClass(container.group.options.draggedClass).removeAttr("style");
    $("body").removeClass(container.group.options.bodyClass);
    if(!container.target.hasClass("target")) {
        $item.remove();
    }
  }
};

$(".addTarget").on("click", function(event) {
  $('<ul class="target"></ul>').appendTo('.targetlist').sortable(sortableOptions);
});

$(".target").sortable(sortableOptions);

$(".itemlist").sortable({
  group: "test",
  drop: false
});

如何使用动态追加的目标元素更新jQuery Sortable？

1 个答案: