Droppable: Update demos to use classes option

Author: arschmitz

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" )

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 );
 			}

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" )

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" )

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();

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 @@ <h3>Feedback on activating draggable:</h3>
 </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>