javascript - 无法放入 Rubaxa 的 Sortable.js 中的克隆容器

Question

这是我的 fiddle :SORTABLE-DEMO

“Widgets”是我可以提取克隆的地方，id="B"的“Group1”是我可以将克隆放入的地方。 我在单击“+”时创建克隆，附加 id="B"属性以便能够放入这些克隆中。但是，删除是不可能的。 (可能是因为重复的 id)

还有什么办法可以解决吗？

任何帮助将不胜感激。谢谢..

new Sortable(document.getElementById('B'), {
  group: {
    name: 'letters',
    put: true
  },
  onAdd: function(event) {
    console.log(event.item);
  }
});


$('#addRow').on('click', function(e) {
  var len = $('.child-border').length;
  $('.parent-border').clone().attr('id','B')
    .toggleClass('parent-border child-border').hide()
    .appendTo('#container').slideDown('slow');
});

Answer 1

我从未使用过 RubaXa...所以不得不摸索它。

示例:https://jsfiddle.net/Twisty/jsnvxsev/1/

HTML

<ul id="widgets-1">
  <h5>Widgets</h5>
  <br>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<br>
<ul id="widgets-2">
  <h5>Group 1</h5>
  <br>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<br>
<ul class="parent-border">
  <div class="form-group">
    <div class="col-sm-12">
      <button type="button" id="deleteRow" class="btn btn-danger btn-circle btn-lg pull-right"><i class="glyphicon glyphicon glyphicon-trash"></i></button>
    </div>
  </div>
</ul>
<div id="container"></div>
<div class="form-group">
  <div class="col-sm-12">
    <button type="button" id="addRow" class="btn btn-success btn-circle btn-lg center-block"><i class="glyphicon glyphicon-plus"></i></button>
  </div>
</div>

JavaScript

new Sortable($('#widgets-1')[0], {
  group: {
    name: 'letters',
    put: false,
    pull: 'clone',
  },
  setData: function(dataTransfer, element) {
    dataTransfer.setData('text', element.textContent);
  },
  sort: false
});
new Sortable($('#widgets-2')[0], {
  group: {
    name: 'letters',
    put: true
  },
  onAdd: function(event) {
    console.log(event.item);
  }
});

$('#addRow').on('click', function(e) {
  var len = $('.child-border').length;
  var widgCount = $("[id|='widgets']").length;
  $('.parent-border').clone().attr('id', 'widgets-' + ++widgCount)
    .toggleClass('parent-border child-border').hide()
    .appendTo('#container').slideDown('slow');
  new Sortable($("#widgets-" + widgCount)[0], {
    group: {
      name: 'letters',
      put: true
    },
    onAdd: function(event) {
      console.log(event.item);
    }
  });
});

$('#container').on('click', '[id=deleteRow]', function(e) {
  $(this).closest('.child-border, .parent-border').remove();
});

添加克隆结构后，我怀疑您需要为排序初始化结构。这似乎可以解决问题。