Droppable: Add classes option

Ref #7053
Ref gh-1411

6 files changed, 33 insertions, 15 deletions

diff --git a/demos/droppable/accepted-elements.html b/demos/droppable/accepted-elements.html
index 19db54650..2a5029526 100644
--- a/demos/droppable/accepted-elements.html
+++ b/demos/droppable/accepted-elements.html
@@ -20,8 +20,10 @@
 		$( "#draggable, #draggable-nonvalid" ).draggable();
 		$( "#droppable" ).droppable({
 			accept: "#draggable",
-			activeClass: "ui-state-hover",
-			hoverClass: "ui-state-active",
+			classes: {
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
diff --git a/demos/droppable/photo-manager.html b/demos/droppable/photo-manager.html
index 6323e5d7b..6a8cf33d1 100644
--- a/demos/droppable/photo-manager.html
+++ b/demos/droppable/photo-manager.html
@@ -47,7 +47,9 @@
 		// let the trash be droppable, accepting the gallery items
 		$trash.droppable({
 			accept: "#gallery > li",
-			activeClass: "ui-state-highlight",
+			classes: {
+				"ui-droppable-active": "ui-state-highlight"
+			},
 			drop: function( event, ui ) {
 				deleteImage( ui.draggable );
 			}
@@ -56,7 +58,9 @@
 		// let the gallery be droppable as well, accepting items from the trash
 		$gallery.droppable({
 			accept: "#trash li",
-			activeClass: "custom-state-active",
+			classes: {
+				"ui-droppable-active": "custom-state-active"
+			},
 			drop: function( event, ui ) {
 				recycleImage( ui.draggable );
 			}
diff --git a/demos/droppable/propagation.html b/demos/droppable/propagation.html
index 60cf7cb37..99fb21711 100644
--- a/demos/droppable/propagation.html
+++ b/demos/droppable/propagation.html
@@ -21,8 +21,10 @@
 		$( "#draggable" ).draggable();
 
 		$( "#droppable, #droppable-inner" ).droppable({
-			activeClass: "ui-state-hover",
-			hoverClass: "ui-state-active",
+			classes: {
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
@@ -34,8 +36,10 @@
 
 		$( "#droppable2, #droppable2-inner" ).droppable({
 			greedy: true,
-			activeClass: "ui-state-hover",
-			hoverClass: "ui-state-active",
+			classes: {
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
diff --git a/demos/droppable/revert.html b/demos/droppable/revert.html
index 74ccb6fc5..f34801e90 100644
--- a/demos/droppable/revert.html
+++ b/demos/droppable/revert.html
@@ -21,8 +21,10 @@
 		$( "#draggable2" ).draggable({ revert: "invalid" });
 
 		$( "#droppable" ).droppable({
-			activeClass: "ui-state-default",
-			hoverClass: "ui-state-hover",
+			classes: {
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
diff --git a/demos/droppable/shopping-cart.html b/demos/droppable/shopping-cart.html
index 0304004ed..747c23a83 100644
--- a/demos/droppable/shopping-cart.html
+++ b/demos/droppable/shopping-cart.html
@@ -28,8 +28,10 @@
 			helper: "clone"
 		});
 		$( "#cart ol" ).droppable({
-			activeClass: "ui-state-default",
-			hoverClass: "ui-state-hover",
+			classes: {
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			accept: ":not(.ui-sortable-helper)",
 			drop: function( event, ui ) {
 				$( this ).find( ".placeholder" ).remove();
diff --git a/demos/droppable/visual-feedback.html b/demos/droppable/visual-feedback.html
index 9b197c56e..9852f371b 100644
--- a/demos/droppable/visual-feedback.html
+++ b/demos/droppable/visual-feedback.html
@@ -20,7 +20,9 @@
 	$(function() {
 		$( "#draggable" ).draggable();
 		$( "#droppable" ).droppable({
-			hoverClass: "ui-state-hover",
+			classes: {
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
@@ -32,7 +34,9 @@
 		$( "#draggable2" ).draggable();
 		$( "#droppable2" ).droppable({
 			accept: "#draggable2",
-			activeClass: "ui-state-default",
+			classes: {
+				"ui-droppable-active": "ui-state-default"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
@@ -66,7 +70,7 @@
 </div>
 
 <div class="demo-description">
-<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).  Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
+<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).  Set the values of the <code>ui-droppable-hover</code> or <code>ui-droppable-active</code> properties on the <code>classes</code> option to specify the respective classes.</p>
 </div>
 </body>
 </html>