Add drag and drop.

Author: ganarajpr

draganddrop.js

@@ -0,0 +1,138 @@
+/**
+ * Created with IntelliJ IDEA.
+ * User: Ganaraj.Pr
+ * Date: 11/10/13
+ * Time: 11:27
+ * To change this template use File | Settings | File Templates.
+ */
+angular.module("ngDragDrop",[])
+    .directive("uiDraggable", [
+        '$parse',
+        '$rootScope',
+        function ($parse, $rootScope) {
+            return function (scope, element, attrs) {
+                if (window.jQuery && !window.jQuery.event.props.dataTransfer) {
+                    window.jQuery.event.props.push('dataTransfer');
+                }
+                element.attr("draggable", false);
+                attrs.$observe("uiDraggable", function (newValue) {
+                    element.attr("draggable", newValue);
+                });
+                var dragData = "";
+                scope.$watch(attrs.drag, function (newValue) {
+                    dragData = newValue;
+                });
+                element.bind("dragstart", function (e) {
+                    var sendData = angular.toJson(dragData);
+                    var sendChannel = attrs.dragChannel || "defaultchannel"
+                    e.dataTransfer.setData('drag/text', sendData);
+                    $rootScope.$broadcast("ANGULAR_DRAG_START", sendChannel);
+
+                });
+
+                element.bind("dragend", function (e) {
+                    var sendChannel = attrs.dragChannel || "defaultchannel"
+                    $rootScope.$broadcast("ANGULAR_DRAG_END", sendChannel);
+                    if (e.dataTransfer.dropEffect !== "none") {
+                        if (attrs.onDropSuccess) {
+                            var fn = $parse(attrs.onDropSuccess);
+                            scope.$apply(function () {
+                                fn(scope, {$event: e});
+                            });
+                        }
+                    }
+                });
+
+
+            };
+        }
+    ])
+    .directive("uiOnDrop", [
+        '$parse',
+        '$rootScope',
+        function ($parse, $rootScope) {
+            return function (scope, element, attr) {
+                var dropChannel = "defaultchannel";
+                var dragChannel = "";
+                var dragEnterClass = attr.dragEnterClass || "on-drag-enter";
+
+                function onDragEnter(e) {
+                    if(dragChannel === dropChannel){
+                        angular.element(e.target).addClass(dragEnterClass);
+                    }
+
+                }
+
+                function onDragLeave(e) {
+                    if(dragChannel === dropChannel){
+                        angular.element(e.target).removeClass(dragEnterClass);
+                    }
+                }
+
+                function onDragOver(e) {
+
+                    if (e.preventDefault) {
+                        e.preventDefault(); // Necessary. Allows us to drop.
+                    }
+
+                    if (e.stopPropagation) {
+                        e.stopPropagation();
+                    }
+                    e.dataTransfer.dropEffect = 'move';
+                    return false;
+                }
+
+                function onDrop(e) {
+                    if (e.preventDefault) {
+                        e.preventDefault(); // Necessary. Allows us to drop.
+                    }
+                    if (e.stopPropagation) {
+                        e.stopPropagation(); // Necessary. Allows us to drop.
+                    }
+                    var data = e.dataTransfer.getData("drag/text");
+                    data = angular.fromJson(data);
+                    var fn = $parse(attr.uiOnDrop);
+                    scope.$apply(function () {
+                        fn(scope, {$data: data, $event: e});
+                    });
+                }
+
+
+                $rootScope.$on("ANGULAR_DRAG_START", function (event, channel) {
+                    dragChannel = channel;
+                    if (dropChannel === channel) {
+                        element.bind("dragenter", onDragEnter);
+
+                        element.bind("dragleave", onDragLeave);
+
+                        element.bind("dragover", onDragOver);
+
+                        element.bind("drop", onDrop);
+                    }
+
+                });
+
+                $rootScope.$on("ANGULAR_DRAG_END", function (e, channel) {
+                    dragChannel = "";
+                    if (dropChannel === channel) {
+                        element.unbind("dragenter", onDragEnter);
+
+                        element.unbind("dragleave", onDragLeave);
+
+                        element.unbind("dragover", onDragOver);
+
+                        element.unbind("drop", onDrop);
+                    }
+                });
+
+
+                attr.$observe(attr.dropChannel, function (value) {
+                    if (value) {
+                        dropChannel = value;
+                    }
+                });
+
+
+            };
+        }
+    ]);

index.html

@@ -46,6 +46,13 @@ <h3 class="text-info"><em>ui-draggable</em></h3>
         takes an expression as the attribute value. The expression should evaluate to either <code>true</code> or <code>false</code>.
         You can toggle the draggability of an element using this expression.
     </p>
+
+    <h3><strong>Usage</strong></h3>
+    <p>
+        <pre class="prettyprint linenums">&lt;ANY ng-bind="{expression}"&gt;
+   ...
+&lt;/ANY&gt;</pre>
+    </p>
 </div>
 </body>
 </html>