Fix for #80: New option 'containment'.

Constrains dragging to within the bounds of the specified element or
region.

README.md

@@ -168,10 +168,14 @@ HEX3 format if possible or HEX format otherwise:
 
 *	``['HEX3', 'HEX']``
 
-###	dragggable (true)
+###	draggable (true)
 Make the dialog draggable if the header is visible and the dialog is
 not inline.
 
+###	containment (null)
+If the dialog is draggable, constrains dragging to within the bounds of the
+specified element or region. Same as jQueryUI Draggable.
+
 ###	duration ('fast')
 Same as jQueryUI DatePicker.
 
@@ -389,4 +393,4 @@ Objects
 -------
 Colorpicker uses a Color object internally to represent a color and convert
 between the supported color models.
-You can create a new Color object through $.colorpicker.Color.
+You can create a new Color object through $.colorpicker.Color.

demo.html

@@ -391,7 +391,8 @@ <h2>Custom swatches - array</h2>
 											},
 							select:			function(event, color) {
 												$('.cp-custom-array-output').text(color.formatted);
-											}
+											},
+							containment: 'body'
 						});
 					});
 				</script>

jquery.colorpicker.js

@@ -521,9 +521,13 @@
 					});
 
 					if (!inst.inline && inst.options.draggable) {
-						inst.dialog.draggable({
-							handle: e
-						});
+						var draggableOptions = {
+							handle: e,
+						}
+						if (inst.options.containment) {
+							draggableOptions.containment = inst.options.containment;
+						}
+						inst.dialog.draggable(draggableOptions);
 					}
 				};
 			},
@@ -1994,6 +1998,7 @@
 			color:				'#00FF00',	// Initial color (for inline only)
 			colorFormat:		'HEX',		// Format string for output color format
 			draggable:			true,		// Make popup dialog draggable if header is visible.
+			containment:		null,		// Constrains dragging to within the bounds of the specified element or region.
 			duration:			'fast',
 			hsv:				true,		// Show HSV controls and modes
 			inline:				true,		// Show any divs as inline by default