Nested drag & drop using dragula.js

index.html

<div class="container">
  <div class="bloc bloc--first">
    <div class="bloc--inner"></div>
  </div>
  <div class="bloc bloc--second">
    <div class="bloc--inner"></div>
  </div>
</div>

nested-drag-drop-using-dragula-js.markdown

Nested drag & drop using dragula.js

Forked from Thomas Eschemann's Pen Nested drag & drop using dragula.js.

A Pen by Gabriel on CodePen.

License.

script.js

(function() {
  dragula([document.querySelector('.container')], {
    moves: function(el, container, handle) {
      return !handle.classList.contains('bloc--inner');
    }
  });

  dragula([].slice.apply(document.querySelectorAll('.bloc')), {
    direction: 'horizontal'
  });
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgit.com/bevacqua/dragula/master/dist/dragula.min.js"></script>

style.scss

html, body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
}
.bloc {
  width: 400px;
  height: 200px;
  margin-bottom: 20px;
  padding: 20px;
  font-size: 0;
}
.bloc--first {
    background: red;
  }
.bloc--second {
    background: green;
  }
.bloc--inner {
  display: inline-block;
  width: calc((100% - 20px) / 2);
  height: 100%;
  background: blue;
  margin-right: 20px;
  &:last-of-type {
    margin: 0;
  }
}

styles

<link href="https://rawgit.com/bevacqua/dragula/master/dist/dragula.min.css" rel="stylesheet" />