fatlinesofcode · anuragshahi9911 · Dec 9, 2014 · Dec 22, 2014 · Jan 4, 2015 · Jan 4, 2015
diff --git a/README.md b/README.md
@@ -1,16 +1,19 @@
 ngDraggable
 ===========
 
+> *NOTE:*
+> I'm not actively maintaining this project any more. If any anyone would like to take on that responsible please get in touch
+
+
 Drag and drop module for Angular JS with support for touch devices. [`demo`](http://htmlpreview.github.io/?https://github.com/fatlinesofcode/ngDraggable/blob/master/example.html).
 
 ### Usage:
 
 - Install: `bower install ngDraggable`
-- Add `jquery`, `angular` and `ngDraggable` to your code:
+- Add `angular` and `ngDraggable` to your code:
 
 ```html
-<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
-<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
 <script src="ngDraggable.js"></script>
 ```
 
@@ -29,7 +32,16 @@ Draggable usage:
   Draggable div
 </div>
 ```
-Note: ng-center-anchor is optional. If not specified, it defaults to false.
+
+* `ng-center-anchor` is optional. If not specified, it defaults to false.
+* If the draggable is also clickable (ng-click, ng-dblclick) the script wont react.
+* You can define a drag-button as child with the attribute `ng-drag-handle`.
+
+```ng-drag-start``` and ```ng-drag-move``` is also available. Add to the ng-drop element.
+``ng-drag-stop`` can be used when you want to react to the user dragging an item and it wasn't dropped into the target container.
+
+```draggable:start```, ```draggable:move``` and  ```draggable:end``` events are broadcast on drag actions.
+
 
 Drop area usage:
 ```html
@@ -59,3 +71,6 @@ app.controller('MainCtrl', function ($scope) {
 [`Cloning`](http://htmlpreview.github.io/?https://github.com/fatlinesofcode/ngDraggable/blob/master/example-clone.html).
 
 [`Canceling`](http://htmlpreview.github.io/?https://github.com/fatlinesofcode/ngDraggable/blob/master/example-cancel.html).
+
+## Pull requests
+We welcome pull requests but please check that all the examples still work if you modified the source base. There have been serveral PRs recently that broke core functionality. If you are feeling really keen you could include some protractor test cases in your PR.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "ngDraggable",
   "main": "ngDraggable.js",
-  "version": "0.0.2",
+  "version": "0.1.10",
   "homepage": "https://github.com/fatlinesofcode/ngDraggable",
   "ignore": [
     "**/.*",
@@ -11,7 +11,6 @@
     "tests"
   ],
   "dependencies": {
-    "jquery": "latest",
     "angular": "latest"
   }
 }
diff --git a/example-cancel.html b/example-cancel.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title>ngDraggable</title>
-  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
   <style>
 
     *{
@@ -120,8 +120,7 @@ <h2>Cancel drag from child element.</h2>
   </div>
   <footer style="margin-top:2000px;">footer</footer>
 
-  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
-  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
   <script src="ngDraggable.js"></script>
   <script>
     angular.module('ExampleApp', ['ngDraggable']).
@@ -161,4 +160,4 @@ <h2>Cancel drag from child element.</h2>
       });
   </script>
 </body>
-</html>
+</html>
diff --git a/example-clone.html b/example-clone.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title>ngDraggable</title>
-  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
   <style>
 
     *{
@@ -88,7 +88,7 @@ <h1>ngDraggable Clone Example</h1>
           {{obj.name}}
           <div ng-drag="true" ng-drag-data="obj"></div>
       </div>
-      <div class="drag-object"  style="background-color: transparent">
+      <div class="drag-object"  style="background-color: transparent; overflow: visible">
           <div ng-drag="true" class="drag-object" ng-drag-data="draggableObjects[3]">{{draggableObjects[3].name}}</div>
       </div>
       <hr/>
@@ -100,13 +100,7 @@ <h1>ngDraggable Clone Example</h1>
           </div>
 
       </div>
-
-
-
     <hr>
-
-
-
   </div>
 
 
@@ -116,11 +110,7 @@ <h1>ngDraggable Clone Example</h1>
 
   <footer style="margin-top:2000px;">footer</footer>
 
-
-
-
-  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
-  <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js'></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
   <script src="ngDraggable.js"></script>
   <script>
     angular.module('ExampleApp', ['ngDraggable']).
@@ -157,4 +147,4 @@ <h1>ngDraggable Clone Example</h1>
       });
   </script>
 </body>
-</html>
+</html>
diff --git a/example-reorder.html b/example-reorder.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <title>ngDraggable</title>
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
     <style>
 
         * {
@@ -109,9 +109,7 @@ <h1>ngDraggable Ordering Example</h1>
 
 <hr/>
 
-
-<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
-<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js'></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
 <script src="ngDraggable.js"></script>
 <script>
     angular.module('ExampleApp', ['ngDraggable']).
@@ -130,4 +128,4 @@ <h1>ngDraggable Ordering Example</h1>
             });
 </script>
 </body>
-</html>
+</html>
diff --git a/example.html b/example.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title>ngDraggable</title>
-  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
   <style>
 
     *{
@@ -83,7 +83,7 @@ <h1>ngDraggable Example</h1>
 
         <ul class="draggable-objects">
             <li  ng-repeat="obj in draggableObjects" >
-                <div ng-drag="true" ng-drag-data="obj"> {{obj.name}} </div>
+                <div ng-drag="true" ng-drag-data="obj" data-allow-transform="true"> {{obj.name}} </div>
             </li>
         </ul>
 
@@ -113,8 +113,7 @@ <h1>ngDraggable Example</h1>
   </div>
   <footer style="margin-top:2000px;">footer</footer>
 
-  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
-  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
   <script src="ngDraggable.js"></script>
   <script>
     angular.module('ExampleApp', ['ngDraggable']).
@@ -154,4 +153,4 @@ <h1>ngDraggable Example</h1>
       });
   </script>
 </body>
-</html>
+</html>
diff --git a/examples-simle.html b/examples-simle.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ngDraggable</title>
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
+    <style>
+
+        * {
+            -moz-box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+        }
+
+        [ng-drag] {
+            -moz-user-select: -moz-none;
+            -khtml-user-select: none;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        [ng-drag] {
+            width: 100px;
+            height: 100px;
+            background: rgba(255, 0, 0, 0.5);
+            color: white;
+            text-align: center;
+            padding-top: 40px;
+            display: inline-block;
+            margin: 0 10px;
+            cursor: move;
+        }
+
+        ul.draggable-objects:after {
+            display: block;
+            content: "";
+            clear: both;
+        }
+
+        .draggable-objects li {
+            float: left;
+            display: block;
+            width: 120px;
+            height: 100px;
+        }
+
+        [ng-drag].drag-over {
+            border: solid 1px red;
+        }
+
+        [ng-drag].dragging {
+            opacity: 0.5;
+        }
+
+        [ng-drop] {
+            background: rgba(0, 255, 0, 0.5);
+            text-align: center;
+            width: 600px;
+            height: 200px;
+            padding-top: 90px;
+            display: block;
+            margin: 20px auto;
+            position: relative;
+        }
+
+        [ng-drop].drag-enter {
+            border: solid 5px red;
+        }
+
+        [ng-drop] span.title {
+            display: block;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 200px;
+            height: 20px;
+            margin-left: -100px;
+            margin-top: -10px;
+        }
+
+        [ng-drop] div {
+            position: relative;
+            z-index: 2;
+        }
+
+    </style>
+</head>
+<body ng-app="ExampleApp">
+
+<div class="container" ng-controller="MainCtrl">
+
+    <div class="row">
+        <h1>ngDraggable Example</h1>
+    </div>
+
+    <ul class="draggable-objects">
+        <li ng-if="true">
+            <div ng-drag="true" ng-drag-data="{name:'test'}" data-allow-transform="true">TEST</div>
+        </li>
+    </ul>
+
+    <hr/>
+    <div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
+        <span class="title">Drop area #1</span>
+
+        <div ng-repeat="obj in droppedObjects1" ng-drag="true" ng-drag-data="obj"
+             ng-drag-success="onDragSuccess1($data,$event)" ng-center-anchor="{{centerAnchor}}">
+            {{obj.name}}
+        </div>
+
+    </div>
+
+    <div ng-drop="true" ng-drop-success="onDropComplete2($data,$event)">
+        <span class="title">Drop area #2</span>
+
+        <div ng-repeat="obj in droppedObjects2" ng-drag="true" ng-drag-data="obj"
+             ng-drag-success="onDragSuccess2($data,$event)" ng-center-anchor="{{centerAnchor}}">
+            {{obj.name}}
+        </div>
+
+    </div>
+
+    <hr>
+
+
+</div>
+<footer style="margin-top:2000px;">footer</footer>
+
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
+<script src="ngDraggable.js"></script>
+<script>
+    angular.module('ExampleApp', ['ngDraggable']).
+            controller('MainCtrl', function ($scope) {
+                $scope.centerAnchor = true;
+                $scope.toggleCenterAnchor = function () {
+                    $scope.centerAnchor = !$scope.centerAnchor
+                }
+                //$scope.draggableObjects = [{name:'one'}, {name:'two'}, {name:'three'}];
+
+                var onDraggableEvent = function (evt, data) {
+                    console.log("128", "onDraggableEvent", evt, data);
+                }
+                $scope.$on('draggable:start', onDraggableEvent);
+               // $scope.$on('draggable:move', onDraggableEvent);
+                $scope.$on('draggable:end', onDraggableEvent);
+                $scope.droppedObjects1 = [];
+                $scope.droppedObjects2 = [];
+                $scope.onDropComplete1 = function (data, evt) {
+                    console.log("127", "$scope", "onDropComplete1", data, evt);
+                    var index = $scope.droppedObjects1.indexOf(data);
+                    if (index == -1)
+                        $scope.droppedObjects1.push(data);
+                }
+                $scope.onDragSuccess1 = function (data, evt) {
+                    console.log("133", "$scope", "onDragSuccess1", "", evt);
+                    var index = $scope.droppedObjects1.indexOf(data);
+                    if (index > -1) {
+                        $scope.droppedObjects1.splice(index, 1);
+                    }
+                }
+                $scope.onDragSuccess2 = function (data, evt) {
+                    var index = $scope.droppedObjects2.indexOf(data);
+                    if (index > -1) {
+                        $scope.droppedObjects2.splice(index, 1);
+                    }
+                }
+                $scope.onDropComplete2 = function (data, evt) {
+                    var index = $scope.droppedObjects2.indexOf(data);
+                    if (index == -1) {
+                        $scope.droppedObjects2.push(data);
+                    }
+                }
+                var inArray = function (array, obj) {
+                    var index = array.indexOf(obj);
+                }
+            });
+</script>
+</body>
+</html>