added dragCls config to drag facet

lib/components/c_facets/Drag.js

@@ -22,6 +22,11 @@ var ComponentFacet = require('../c_facet')
  *      - params: object of key-value pairs that will be passed in metadata data type (can also be function or method name that returns this object). See config.dragDrop.dataTypes.componentMetaTemplate
  *      - data: data that will be stored in the above meta data type (or function)
  *  - allowedEffects: string (or function) as specified here: https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#dragstart
+ *  - dragImage:
+ *      - url: path to image to display when dragging, instead of the owner element
+ *      - x: x offset for the image
+ *      - y: y offset for the image
+ *  - dragCls: CSS class to apply to the component being dragged
  *  - dataTypes: map of additional data types the component will supply to data transfer object, key is data type, value is a function that returns it, component will be passed as the context to this function
  *
  * If function is specified in any parameter it will be called with the component as the context
@@ -132,6 +137,7 @@ function onMouseMovement(eventType, event) {
 
 function onDragStart(eventType, event) {
     event.stopPropagation();
+
     if (this.config.off || ! targetInDragHandle.call(this)) {
         event.preventDefault();
         return;
@@ -149,6 +155,9 @@ function onDragStart(eventType, event) {
     setAdditionalDataTypes.call(this);
     _setAllowedEffects.call(this, dt);
 
+    if (this.config.dragCls)
+        this.owner.el.classList.toggle(this.config.dragCls, true);
+
     DragDrop.service.postMessageSync('dragdropstarted', {
         eventType: 'dragstart',
         dragDrop: dt,
@@ -200,8 +209,11 @@ function onDragging(eventType, event) {
 
 function onDragEnd(eventType, event) {
     if (_dragIsDisabled.call(this, event)) return;
-
     event.stopPropagation();
+
+    if (this.config.dragCls)
+        this.owner.el.classList.toggle(this.config.dragCls, false);
+
     var dt = new DragDrop(event);
     DragDrop.service.postMessageSync('completedragdrop', {
         eventType: 'dragend',