diff options
Diffstat (limited to 'demos/droppable')
| -rw-r--r-- | demos/droppable/accepted-elements.html | 6 | ||||
| -rw-r--r-- | demos/droppable/photo-manager.html | 8 | ||||
| -rw-r--r-- | demos/droppable/propagation.html | 12 | ||||
| -rw-r--r-- | demos/droppable/revert.html | 6 | ||||
| -rw-r--r-- | demos/droppable/shopping-cart.html | 6 | ||||
| -rw-r--r-- | demos/droppable/visual-feedback.html | 10 |
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> |