Feature/allow custom classes

README.md

@@ -26,6 +26,8 @@ Use the dnd-draggable directive to make your element draggable
 
 **Attributes**
 * `dnd-draggable` Required attribute. The value has to be an object that represents the data of the element. In case of a drag and drop operation the object will be serialized and unserialized on the receiving end.
+* `dnd-class-for-dragging` Optional name of class to add to element while it's being dragged. Defaults to dndDragging.
+* `dnd-class-for-dragging-source` Optional name of class to add to element after drag operation has started. See 'CSS classes' for more details. Defaults to dndDraggingSource.
 * `dnd-effect-allowed` Use this attribute to limit the operations that can be performed. Valid options are `move`, `copy` and `link`, as well as `all`, `copyMove`, `copyLink` and `linkMove`, while `move` is the default value. The semantics of these operations are up to you and have to be implemented using the callbacks described below. If you allow multiple options, the user can choose between them by using the modifier keys (OS specific). The cursor will be changed accordingly, expect for IE and Edge, where this is not supported. Note that the implementation of this attribute is very buggy in IE9. This attribute works together with `dnd-external-sources` except on Safari and IE, where the restriction will be lost when dragging accross browser tabs. [Design document](https://github.com/marceljuenemann/angular-drag-and-drop-lists/wiki/Drop-Effects-Design) [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced)
 * `dnd-type` Use this attribute if you have different kinds of items in your application and you want to limit which items can be dropped into which lists. Combine with dnd-allowed-types on the dnd-list(s). This attribute must be a lower case string. Upper case characters can be used, but will be converted to lower case automatically. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)
 * `dnd-disable-if` You can use this attribute to dynamically disable the draggability of the element. This is useful if you have certain list items that you don't want to be draggable, or if you want to disable drag & drop completely without having two different code branches (e.g. only allow for admins). [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)
@@ -41,8 +43,8 @@ Use the dnd-draggable directive to make your element draggable
 * `dnd-callback` Custom callback that is passed to dropzone callbacks and can be used to communicate between source and target scopes. The dropzone can pass user defined variables to this callback. This can be used to transfer objects without serialization, see [Demo](https://jsfiddle.net/Ldxffyod/1/).
 
 **CSS classes**
-* `dndDragging` This class will be added to the element while the element is being dragged. It will affect both the element you see while dragging and the source element that stays at it's position. Do not try to hide the source element with this class, because that will abort the drag operation.
-* `dndDraggingSource` This class will be added to the element after the drag operation was started, meaning it only affects the original element that is still at it's source position, and not the "element" that the user is dragging with his mouse pointer
+* `dndDragging` This class will be added to the element while the element is being dragged. It will affect both the element you see while dragging and the source element that stays at it's position. Do not try to hide the source element with this class, because that will abort the drag operation. Class name can be overridden (see above).
+* `dndDraggingSource` This class will be added to the element after the drag operation was started, meaning it only affects the original element that is still at it's source position, and not the "element" that the user is dragging with his mouse pointer.  Class name can be overridden (see above).
 
 ## dnd-list directive
 
@@ -51,6 +53,8 @@ Use the dnd-list attribute to make your list element a dropzone. Usually you wil
 **Attributes**
 * `dnd-list` Required attribute. The value has to be the array in which the data of the dropped element should be inserted. The value can be blank if used with a custom dnd-drop handler that handles the insertion on its own.
 * `dnd-allowed-types` Optional array of allowed item types. When used, only items that had a matching dnd-type attribute will be dropable. Upper case characters will automatically be converted to lower case. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)
+* `dnd-class-for-dragover` Optional name of class to add to list while element is being dragged over it. Defaults to dndDragover.
+* `dnd-class-for-placeholder` Optional name of class to add to placeholder element. Defaults to dndPlaceholder.
 * `dnd-effect-allowed` Optional string expression that limits the drop effects that can be performed on the list. See dnd-effect-allowed on dnd-draggable for more details on allowed options. The default value is `all`.
 * `dnd-disable-if` Optional boolean expression. When it evaluates to true, no dropping into the list is possible. Note that this also disables rearranging items inside the list. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)
 * `dnd-horizontal-list` Optional boolean expression. When it evaluates to true, the positioning algorithm will use the left and right halfs of the list items instead of the upper and lower halfs. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced)
@@ -72,8 +76,8 @@ Use the dnd-list attribute to make your list element a dropzone. Usually you wil
 * `dnd-inserted` Optional expression that is invoked after a drop if the element was actually inserted into the list. The same local variables as for `dnd-drop` will be available. Note that for reorderings inside the same list the old element will still be in the list due to the fact that `dnd-moved` was not called yet. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced)
 
 **CSS classes**
-* `dndPlaceholder` When an element is dragged over the list, a new placeholder child element will be added. This element is of type `li` and has the class `dndPlaceholder` set. Alternatively, you can define your own placeholder by creating a child element with `dndPlaceholder` class.
-* `dndDragover` This class will be added to the list while an element is being dragged over the list.
+* `dndPlaceholder` When an element is dragged over the list, a new placeholder child element will be added. This element is of type `li` and has the class `dndPlaceholder` set. Alternatively, you can define your own placeholder by creating a child element with `dndPlaceholder` class. Class name can be overridden (see above).
+* `dndDragover` This class will be added to the list while an element is being dragged over the list. Class name can be overridden (see above).
 
 ## dnd-nodrag directive
 

angular-drag-and-drop-lists.js

@@ -26,6 +26,11 @@
    * - dnd-draggable      Required attribute. The value has to be an object that represents the data
    *                      of the element. In case of a drag and drop operation the object will be
    *                      serialized and unserialized on the receiving end.
+   * - dnd-class-for-dragging
+   *                      Optional name of class to add to element while it's being dragged. Defaults to dndDragging.
+   * - dnd-class-for-dragging-source
+   *                      Optional name of class to add to element after drag operation has started. See 'CSS classes'
+   *                      for more details. Defaults to dndDraggingSource.
    * - dnd-effect-allowed Use this attribute to limit the operations that can be performed. Valid
    *                      options are "move", "copy" and "link", as well as "all", "copyMove",
    *                      "copyLink" and "linkMove". The semantics of these operations are up to you
@@ -77,6 +82,24 @@
    */
   dndLists.directive('dndDraggable', ['$parse', '$timeout', function($parse, $timeout) {
     return function(scope, element, attr) {
+      var classForDragging = 'dndDragging';
+      var classForDraggingSource = 'dndDraggingSource';
+
+      // If the dnd-class* attribute is set, we'll parse the current value and watch for future changes
+      if (attr.dndClassForDragging) {
+        classForDragging = attr.dndClassForDragging;
+        scope.$watch(attr.dndClassForDragging, function(){
+          classForDragging = attr.dndClassForDragging;
+        });
+      }
+
+      if (attr.dndClassForDraggingSource) {
+        classForDraggingSource = attr.dndClassForDraggingSource;
+        scope.$watch(attr.dndClassForDraggingSource, function(){
+          classForDraggingSource = attr.dndClassForDraggingSource;
+        });
+      }
+
       // Set the HTML5 draggable attribute on the element.
       element.attr("draggable", "true");
 
@@ -128,8 +151,8 @@
         }
 
         // Add CSS classes. See documentation above.
-        element.addClass("dndDragging");
-        $timeout(function() { element.addClass("dndDraggingSource"); }, 0);
+        element.addClass(classForDragging);
+        $timeout(function() { element.addClass(classForDraggingSource); }, 0);
 
         // Try setting a proper drag image if triggered on a dnd-handle (won't work in IE).
         if (event._dndHandle && event.dataTransfer.setDragImage) {
@@ -168,12 +191,12 @@
         // Clean up
         dndState.isDragging = false;
         dndState.callback = undefined;
-        element.removeClass("dndDragging");
-        element.removeClass("dndDraggingSource");
+        element.removeClass(classForDragging);
+        element.removeClass(classForDraggingSource);
         event.stopPropagation();
 
         // In IE9 it is possible that the timeout from dragstart triggers after the dragend handler.
-        $timeout(function() { element.removeClass("dndDraggingSource"); }, 0);
+        $timeout(function() { element.removeClass(classForDraggingSource); }, 0);
       });
 
       /**
@@ -211,6 +234,11 @@
    * - dnd-list             Required attribute. The value has to be the array in which the data of
    *                        the dropped element should be inserted. The value can be blank if used
    *                        with a custom dnd-drop handler that always returns true.
+   * - dnd-class-for-dragover
+   *                        Optional name of class to add to list while element is being dragged over it.
+   *                        Defaults to dndDragover.
+   * - dnd-class-for-placeholder
+   *                        Optional name of class to add to placeholder element. Defaults to dndPlaceholder.
    * - dnd-allowed-types    Optional array of allowed item types. When used, only items that had a
    *                        matching dnd-type attribute will be dropable. Upper case characters will
    *                        automatically be converted to lower case.
@@ -271,11 +299,29 @@
    */
   dndLists.directive('dndList', ['$parse', function($parse) {
     return function(scope, element, attr) {
+      var classForPlaceholder = 'dndPlaceholder';
+      var classForDragover = 'dndDragover';
+
+      // If the dnd-class* attribute is set, we'll parse the current value and watch for future changes
+      if (attr.dndClassForPlaceholder) {
+        classForPlaceholder = attr.dndClassForPlaceholder;
+        scope.$watch(attr.dndClassForPlaceholder, function(){
+          classForPlaceholder = attr.dndClassForPlaceholder;
+        });
+      }
+
+      if (attr.dndClassForDragover) {
+        classForDragover = attr.dndClassForDragover;
+        scope.$watch(attr.dndClassForDragover, function(){
+          classForDragover = attr.dndClassForDragover;
+        });
+      }
+
       // While an element is dragged over the list, this placeholder element is inserted
       // at the location where the element would be inserted after dropping.
       var placeholder = getPlaceholderElement();
       placeholder.remove();
-
+      
       var placeholderNode = placeholder[0];
       var listNode = element[0];
       var listSettings = {};
@@ -361,7 +407,7 @@
           event.dataTransfer.dropEffect = dropEffect;
         }
 
-        element.addClass("dndDragover");
+        element.addClass(classForDragover);
         event.stopPropagation();
         return false;
       });
@@ -519,7 +565,7 @@
        */
       function stopDragover() {
         placeholder.remove();
-        element.removeClass("dndDragover");
+        element.removeClass(classForDragover);
         return true;
       }
 
@@ -554,12 +600,13 @@
         var placeholder;
         angular.forEach(element.children(), function(childNode) {
           var child = angular.element(childNode);
-          if (child.hasClass('dndPlaceholder')) {
+          if (child.hasClass(classForPlaceholder)) {
             placeholder = child;
           }
         });
-        return placeholder || angular.element("<li class='dndPlaceholder'></li>");
+        return placeholder || angular.element("<li class='" + classForPlaceholder + "'></li>");
       }
+
     };
   }]);