不能放入 Rubaxa 的可排序容器中.js

Question

这是我的小提琴：sortable-demo

"小部件"是从我可以拔出克隆的地方，并且具有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();
});

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