JSFiddle - React, Tailwind, and code Playground

by luckylooke

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/luckylooke/dragular/master/dist/dragular.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="https://cdn.rawgit.com/luckylooke/dragular/master/dist/dragular.js"></script>
<!-- HTML -->
<div ng-app="myApp">
  <div ng-controller="Basic">
    <div class="column-wrapper">
      <div class="column" ng-repeat="state in planningStates" ng-init="indexC = $index">
        <div class="column-handle">{{state.name}}</div>
        <div class="row-wrapper">
          <div class="row" ng-repeat="idea in getFilteredModel(containersFilteredModels, $index, state.ideas)">
          <span>{{idea.deadline | date : 'shortDate'}}</span>
            <span ng-click="deleteRow($index, $parent.$index)">(X)</span>
          </div>
        </div>
      </div>  
    </div>
    <button ng-click="addRow(1)">Add row</button>
</div>
</div>

CSS

.column-wrapper {
  display: flex;
}
.column {
  flex: 1;
  width: 20%;
}

.row-wrapper {
  min-height: 50px;
}

JavaScript

var myApp = angular.module('myApp',['dragularModule']);
myApp.controller('Basic', 
function($scope, dragularService, $timeout, $filter) {
    $scope.planningStates = [{"id":187,"name":"edzd","order":0,"ideas":[{"id":15721,"deadline":"2016-04-22T00:00:00+0200","owner":"dvzdvdzd","description":"zdvzdvzd","name":"sczscz"}]},{"id":189,"name":"efgerg","order":1,"ideas":[]},{"id":186,"name":"efzefz","order":2,"ideas":[{"id":15728,"deadline":"2016-04-27T09:14:03+0200","owner":"efze","description":"efzefze","name":"test"},{"id":15726,"deadline":"2016-04-22T16:34:29+0200","owner":"zadaz","description":"zdazda","name":"TEST2"},{"id":15725,"deadline":"2016-04-25T00:00:00+0200","owner":"zadaz","description":"azdazd","name":"zada"},{"id":15724,"deadline":"2016-04-24T00:00:00+0200","owner":"zefze","description":"ezfzererefefzefz","name":"TEST"},{"id":15722,"deadline":"2016-04-22T00:00:00+0200","owner":"dzvzv","description":"dzvzdv","name":"vzdzd"}]},{"id":190,"name":"test","order":3,"ideas":[{"id":15729,"deadline":"2016-04-30T09:32:09+0200","owner":"efef","description":"ezfzefze","name":"ezfefze"},{"id":15723,"deadline":"2016-04-24T00:00:00+0200","owner":"ezfzef","description":"ezfze","name":"efzefz"}]}];
  
  $scope.addRow = addRow;
  $scope.deleteRow = deleteRow;
  $scope.getFilteredModel = getFilteredModel;
  
  $scope.filteredRow = [];
  $scope.containersFilteredModels = [];
  
  var instanceDragularColumn,
  		instanceDragularRow;
  
  $timeout(function () {
  	dragularService.cleanEnviroment();
    var containerColumn = $('.column-wrapper');
    var containerRow = $('.row-wrapper');
    
    
  
  $scope.containersFilteredModels =  (function getNestedContainersModel(){
        var parent = $scope.planningStates,
            containersModel = [];
        for (var i = 0; i < parent.length; i++) {
          containersModel.push([]);
        }
        return containersModel;
      })();
    
    instanceDragularColumn = dragularService(containerColumn, {
      scope:...