Javascript 无法放入Rubaxa'；s Sortable.js

这是我的小提琴：

“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');
});

---

我从来没用过RubaXa。。。所以我不得不把它拨弄过去

例如：

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>

---

在添加克隆结构之后，我怀疑您需要初始化结构以进行排序。这似乎很管用。

动态添加内容时，需要使用

.sortable（“刷新”）

方法允许sortable包含此新元素。另外，

id

属性必须是唯一的。没关系，您没有使用jQuery UI Sortable。这太棒了！非常感谢：）我不久前发现我没有在克隆的元素上创建可排序的实例。

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();
});