add and document dragstart/dragstop feature. Issue #160

Author: bgrins

docs/docs.js

@@ -260,6 +260,37 @@ $("#changeOnMoveNo").spectrum({
     }
 });
 
+function prettyTime() {
+    var date = new Date();
+
+    return date.toLocaleTimeString();
+}
+
+$("#eventshow").spectrum({
+    show: function(c) {
+        var label = $("#eventshowLabel");
+        label.text("show called at " + prettyTime() + " (color is " + c.toHexString() + ")");
+    }
+});
+
+$("#eventhide").spectrum({
+    hide: function(c) {
+        var label = $("#eventhideLabel");
+        label.text("hide called at " + prettyTime() + " (color is " + c.toHexString() + ")");
+    }
+});
+
+$("#eventdragstart").spectrum().on("dragstart.spectrum", function(e, c) {
+    var label = $("#eventdragstartLabel");
+    label.text("dragstart called at " + prettyTime() + " (color is " + c.toHexString() + ")");
+});
+
+$("#eventdragstop").spectrum().on("dragstop.spectrum", function(e, c) {
+    var label = $("#eventdragstopLabel");
+    label.text("dragstop called at " + prettyTime() + " (color is " + c.toHexString() + ")");
+});
+
+
 $(".basic").spectrum({ change: updateBorders });
 $(".override").spectrum({
     color: "yellow",

index.html

@@ -641,10 +641,15 @@ <h3 id="events-hide">hide</h3>
             </div>
 
             <pre class='prettyprint'>
-            hide: function(color) {
-                color.toHexString(); // #ff0000
-            }
+hide: function(color) {
+    color.toHexString(); // #ff0000
+}
             </pre>
+
+            <div class='example'>
+                <input type='text' value='blanchedalmond' name='eventhide' id='eventhide' />
+                <em id='eventhideLabel'  class='em-label'></em>
+            </div>
         </div>
 
         <h3 id="events-show">show</h3>
@@ -659,10 +664,15 @@ <h3 id="events-show">show</h3>
             </div>
 
             <pre class='prettyprint'>
-            show: function(color) {
-                color.toHexString(); // #ff0000
-            }
+show: function(color) {
+    color.toHexString(); // #ff0000
+}
             </pre>
+
+            <div class='example'>
+                <input type='text' value='blanchedalmond' name='eventshow' id='eventshow' />
+                <em id='eventshowLabel'  class='em-label'></em>
+            </div>
         </div>
 
         <h3 id="events-beforeShow">beforeShow</h3>
@@ -686,6 +696,51 @@ <h3 id="events-beforeShow">beforeShow</h3>
             </div>
         </div>
 
+        <h3 id="events-dragstart">dragstart</h3>
+
+        <div class='option-content'>
+            <div class='description'>
+                <p>
+                Called at the beginning of a drag event on either
+                hue slider, alpha slider, or main color picker areas
+                </p>
+            </div>
+
+            <pre class='prettyprint'>
+$(element).on("dragstart.spectrum"): function(e, color) {
+    color.toHexString(); // #ff0000
+}
+            </pre>
+
+            <div class='example'>
+                <input type='text' value='blanchedalmond' name='eventdragstart' id='eventdragstart' />
+                <em id='eventdragstartLabel'  class='em-label'></em>
+            </div>
+        </div>
+
+        <h3 id="events-dragstop">dragstop</h3>
+
+        <div class='option-content'>
+            <div class='description'>
+                <p>
+                Called at the end of a drag event on either
+                hue slider, alpha slider, or main color picker areas
+                </p>
+            </div>
+
+            <pre class='prettyprint'>
+$(element).on("dragstop.spectrum"): function(e, color) {
+    color.toHexString(); // #ff0000
+}
+            </pre>
+
+            <div class='example'>
+                <input type='text' value='blanchedalmond' name='eventdragstop' id='eventdragstop' />
+                <em id='eventdragstopLabel'  class='em-label'></em>
+            </div>
+        </div>
+
+
         <h2 id="methods">Methods</h2>
 <pre class='prettyprint'>
 $("#picker").spectrum("show");

spectrum.js

@@ -507,10 +507,12 @@
             }
             container.addClass(draggingClass);
             shiftMovementDirection = null;
+            boundElement.trigger('dragstart.spectrum', [ get() ]);
         }
 
         function dragStop() {
             container.removeClass(draggingClass);
+            boundElement.trigger('dragstop.spectrum', [ get() ]);
         }
 
         function setFromTextInput() {