Question

这是我的小提琴：SORTABLE-DEMO

＆＃34;小部件＆＃34;是我可以从哪里拉克隆＆＃34; Group1＆＃34;有id =＆＃34; B＆＃34;是我可以放入克隆的地方。我点击＆＃34; +＆＃34;创建克隆，附上id =＆＃34; B＆＃34;属性可以放入这些克隆。但是，不可能掉线。（也许是因为重复的ids）

还有其他方法可以解决这个问题吗？

非常感谢任何帮助。谢谢..

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

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

不能放入Rubaxa的Sortable.js

1 个答案: