Невозможно перетащить элемент, если сортировка применяется к родительскому и дочернему элементу как в RubaXa Sortable

Я считаю, что проблема в том, как вы структурировали вложенные списки.

Ваша текущая реализация:

<div class="parent">
    <div class="list-group">Stage -1
        <div class="card">A</div>
        <div class="card">B</div>
        <div class="card">C</div>
    </div>
    <div class="list-group">Stage-2
        <div class="card">D</div>
        <div class="card">E</div>
        <div class="card">F</div>
    </div>
    <div class="list-group">Stage-3
        <div class="card">G</div>
        <div class="card">H</div>
        <div class="card">I</div>
    </div>    
</div>

Вместо этого вам нужно вложить дочернюю группу аналогично тому, как вы вложили родительскую группу. То есть в каждом div должны быть только перетаскиваемые элементы. Извините, если это плохое объяснение, но, возможно, пример будет иметь больше смысла. Вот как я реструктурировал ваш список, чтобы он работал:

<div class="parent">
  <div class="list-group">
    <div>Stage - 1</div>
    <div class="child">
      <div class="card">A</div>
      <div class="card">B</div>
      <div class="card">C</div>
    </div>
  </div>
  <div class="list-group">
    <div>Stage - 2</div>
    <div class="child">
      <div class="card">D</div>
      <div class="card">E</div>
      <div class="card">F</div>
    </div>
  </div>
  <div class="list-group">
    <div>Stage - 3</div>
    <div class="child">
      <div class="card">G</div>
      <div class="card">H</div>
      <div class="card">I</div>
    </div>
  </div>    
</div>

Обратите внимание на добавление элементов div.child.

Затем вы должны обновить свой javascript, чтобы он соответствовал этой новой структуре, например:

// Select parent group and make sortable
var parent = document.getElementsByClassName('parent');
new Sortable(parent[0], {
    group: {
        name: 'parent-group'
    },
    forceFallback: true,
    fallbackClass: 'clone',  
});

// Select our child group and make sortable
var child = document.getElementsByClassName('child')
for(var i = 0;i < child.length;i++) {
    new Sortable(child[i], {
        group: {
            name: 'child-group',
            pull: true,
        },
        forceFallback: true,
        fallbackClass: 'clone_card',  
    });
}

Это выберет родительскую группу, как у вас было изначально, но теперь вместо выбора элемента .list-group мы выбираем элемент .child, который содержит объекты, которые мы хотим перетащить.

Вот живой пример на jsbin, который вы можете посмотреть по ссылке:
http://jsbin.com/ronikomabi/edit?html,css,js,output

Чтобы ответить на ваш комментарий, вам нужно добавить минимальную ширину к контейнеру .child, чтобы у вас все еще была зона перетаскивания, в которую вы могли бы перетаскивать элементы, даже после того, как все элементы были удалены. Я обновил ссылку JSbin новой версией, которая устраняет эту проблему.