JSFiddle - React, Tailwind, and code Playground

by Nicolas Lips

HTML

<div ng-app="app" ng-controller="SectionsController">
  <div ng-repeat="section in model.sections" class="col-md-6">
      <div class="panel panel-info">
          <div class="panel-heading">
              <h3 class="panel-title">List {{section.getName()}}</h3>
          </div>
          <ul dnd-list="ctrl.items" ng-controller="SectionController as ctrl">
              <li ng-repeat="item in ctrl.items"
                  dnd-draggable="item"
                  dnd-moved="ctrl.items.splice($index, 1)"
                  dnd-effect-allowed="move"
                  dnd-selected="models.selected = item"
                  ng-class="{'selected': models.selected === item}"
                  >
                  {{item.getName()}}
              </li>
          </ul>
      </div>
  </div>
</div>

JavaScript

var app = angular.module("app", []);
app.controller("SectionsController", ["$scope", function($scope) {
	var workspace = $scope.workspace;

	$scope.model = {
    selected: null,
    sections: workspace.getSections()
	};

SectionController($scope) {
var section = $scope.section;
var widgets = [];
$watchCollection(function() {
    return section.getWidgets();
}
}]);