Initial code, first steps towards demo

.gitignore

@@ -0,0 +1,2 @@
+.idea
+node_modules

angular-drag-and-drop-lists.js

@@ -0,0 +1,155 @@
+'use strict';
+
+/* Controllers */
+angular.module('myApp.controllers', [])
+    .directive('dndDraggable', function($parse, $timeout) {
+        return function(scope, element, attr) {
+            var model = attr.dndDraggable;
+
+            element.attr("draggable", "true");
+
+            element.on('click', function(event) {
+                scope.$apply(function() {
+                    $parse(attr.dndSelected)(scope);
+                });
+
+                event.stopPropagation();
+            });
+
+            element.on('dragstart', function(event) {
+                var data = angular.toJson(scope.$eval(model));
+                event.dataTransfer.setData("json", data);
+                event.dataTransfer.effectAllowed = attr.dndEffectAllowed;
+
+                // We can not hide the element instantly because
+                // that would abort the dragging
+                element.addClass("dndDragging");
+                $timeout(function() {
+                    element.addClass("dndDraggingSource");
+                }, 0);
+
+                event.stopPropagation();
+            });
+
+            element.on('dragend', function(event) {
+                scope.$apply(function() {
+                    switch (event.dataTransfer.dropEffect) {
+                        case "move":
+                            $parse(attr.dndMoved)(scope);
+                            break;
+
+                        case "copy":
+                            $parse(attr.dndCopied)(scope);
+                            break;
+                    }
+                });
+
+                element.removeClass("dndDragging");
+                element.removeClass("dndDraggingSource");
+                event.stopPropagation();
+            });
+
+        };
+    })
+
+    .directive('dndDropzone', function($timeout) {
+        return function(scope, element, attr) {
+            var listNode = element[0];
+            var placeholder = angular.element("<li class='dndPlaceholder'></li>");
+            var placeholderNode = placeholder[0];
+            var dropzoneList = attr.dndDropzone;
+
+            element.on('dragover', function(event) {
+                // convert type list to real array
+                if (Array.prototype.indexOf.call(event.dataTransfer.types, "json") === -1) {
+                    return true;
+                }
+
+                if (event.target.parentNode === listNode) {
+                    // This would be easier with index() and before() methods
+                    var targetIndex = Array.prototype.indexOf.call(listNode.children, event.target);
+                    var placeholderIndex = Array.prototype.indexOf.call(listNode.children, placeholderNode);
+                    var insertBefore = targetIndex < placeholderIndex ? event.target : event.target.nextSibling;
+                    listNode.insertBefore(placeholderNode, insertBefore);
+                }
+
+                element.addClass("dragover");
+                event.preventDefault();
+                event.stopPropagation();
+            });
+
+            element.on('dragenter', function(event) {
+                // Add placeholder element if it's not shown yet
+                // This is especially needed with empty lists
+                if (placeholderNode.parentNode != listNode) {
+                    element.append(placeholder);
+                }
+
+                event.stopPropagation();
+
+            });
+
+            element.on('dragleave', function(event) {
+                element.removeClass("dragover");
+                $timeout(function() {
+                    // If we are still inside the dropzone the dragover
+                    // class will have been set again in the meantime
+                    if (!element.hasClass("dragover")) {
+                        placeholder.remove();
+                    }
+                }, 100);
+            });
+
+            element.on('drop', function(event) {
+                var placeholderIndex = Array.prototype.indexOf.call(listNode.children, placeholderNode);
+
+                var target = scope.$eval(dropzoneList);
+                var model = JSON.parse(event.dataTransfer.getData("json"));
+
+
+                scope.$apply(function() {
+                    target.splice(placeholderIndex, 0, model);
+                });
+
+                placeholder.remove();
+
+                event.preventDefault();
+                event.stopPropagation();
+
+            });
+        };
+    })
+
+    .controller('MyCtrl1', ['$scope', function($scope) {
+        $scope.toolbox = [
+            {
+                type: "item",
+                id: 1
+            },
+            {
+                type: "container",
+                id: 1,
+                columns: [[], []]
+            }
+        ];
+
+        $scope.lists = [[], []];
+
+        $scope.model = {
+            selected: null
+        };
+
+        $scope.selectItem = function(item) {
+            console.log("select reached me!");
+            $scope.model.selected = item;
+        };
+
+        $scope.$watch('lists', function(lists) {
+            $scope.result = angular.toJson(lists, true);
+        }, true);
+
+
+    }])
+    .controller('MyCtrl2', [function() {
+
+    }]);

demo/demo-framework.js

@@ -0,0 +1,8 @@
+angular.module("demo", ["ngRoute"]).config(function($routeProvider) {
+    $routeProvider
+        .when('/simple', {
+            templateUrl: 'simple/simple.html',
+            controller: 'SimpleDemoController'
+        })
+        .otherwise({redirectTo: '/simple'});
+});

demo/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Drag &amp; Drop Lists for angular.js</title>
+
+    <!-- angular is the only dependency! -->
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
+<!--    <script src="../angular-http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>-->
+
+    <!-- Stuff that is only required in this demo (no need to copy) -->
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
+
+    <!-- Demo code -->
+    <script src="demo-framework.js"></script>
+    <script src="simple/simple.js"></script>
+
+</head>
+<body ng-app="demo" style="padding-top: 70px; padding-bottom: 30px">
+
+    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container">
+            <div class="navbar-header">
+                <a class="navbar-brand" href="#">angular-drag-and-drop-lists</a>
+            </div>
+            <div class="navbar-collapse collapse">
+                <ul class="nav navbar-nav">
+                    <li class="active"><a href="#">Simple</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                </ul>
+            </div><!--/.nav-collapse -->
+        </div>
+    </div>
+
+    <div class="container">
+
+    <!-- TODO
+
+    <div class="jumbotron">
+        <h1>Hello, world!</h1>
+        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+        <p><a href="#" class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
+    </div>
+    -->
+
+        <div ng-view></div>
+
+    </div>
+
+
+</body>
+</html>

demo/simple/simple.html

@@ -0,0 +1,2 @@
+Hello World!
+

demo/simple/simple.js

@@ -0,0 +1,3 @@
+angular.module("demo").controller("SimpleDemoController", function($scope) {
+
+});

package.json

@@ -0,0 +1,13 @@
+{
+    "name": "angular-drag-and-drop-lists",
+    "version": "1.0.0",
+    "description": "Angular directives for sorting nested lists using the HTML5 Drag and Drop API",
+    "repository": "https://github.com/marceljuenemann/angular-drag-and-drop-lists",
+    "license": "MIT",
+    "devDependencies": {
+        "http-server": "^0.6.1"
+    },
+    "scripts": {
+        "start": "http-server -p 8000"
+    }
+}