Not able to drag and drop an element if sortable is applied on parent and child both in RubaXa Sortable

Question

I created BIN "http://jsbin.com/cekarimaxu/1/edit?html,css,js,output" of my issue.

Here, I have a structure like STAGE -> In stage there is a card.

Now card and stage both should be sortable and for sortaable i am using RubaXa sortable. Note that Here I set "forcefallback: true" because I want to style my dragged element (Both stage as well as cards).

Now here the issue I am facing is I can drag and drop the cards but I am not able to drag and drop the stages SEE:- VIDEO

The desired behavior should something like this:- VIDEO

However, this desired behavior comes if I set "forcefallback: false" and in my case, I want to apply some custom CSS on the dragged element so I can't set "forcefallback: false"

Answer 1

I believe the issue is with how you structured you nested lists.

Your current implementation:

<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>

What you need to do instead is to nest the child group similarly to how you have the parent group nested. That is, you should only have draggable items in each div. Sorry if that's a bad explanation, but maybe an example would make more sense. Here's how I restructured your list so that it would work:

<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>

Note the addition of the div.child elements.

Then you should update your javascript to match this new structure like so:

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

This will select the parent group as you originally had it, but now instead of selecting the .list-group element, we select the .child element which contains the objects we wish to drag.

Here's a live example on jsbin you can look reference:
http://jsbin.com/ronikomabi/edit?html,css,js,output

To address your comment, you need to add a minimum width to the .child container so that you you still have a drop zone you can drop items onto even after all items have been removed. I updated the JSbin link with a new version that fixes that issue.