Permalink
Browse files

Droppable: Add classes option

Ref #7053
Ref gh-1411
1 parent e9bb449 commit f58277a521ae41b1d3e054a419ef5fda85e7db21 @arschmitz arschmitz committed Jan 1, 2015
@@ -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" )
@@ -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 );
}
@@ -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" )
@@ -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" )
@@ -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();
@@ -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>
@@ -5,6 +5,9 @@
<title>jQuery UI Droppable Test Suite</title>
<script src="../../jquery.js"></script>
+ <script>
+ $.uiBackCompat = false;
+ </script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
@@ -1,12 +1,10 @@
TestHelpers.commonWidgetTests( "droppable", {
defaults: {
accept: "*",
- activeClass: false,
addClasses: true,
classes: {},
disabled: false,
greedy: false,
- hoverClass: false,
scope: "default",
tolerance: "intersect",
@@ -0,0 +1,21 @@
+TestHelpers.commonWidgetTests( "droppable", {
+ defaults: {
+ accept: "*",
+ activeClass: false,
+ addClasses: true,
+ classes: {},
+ disabled: false,
+ greedy: false,
+ hoverClass: false,
+ scope: "default",
+ tolerance: "intersect",
+
+ // callbacks
+ activate: null,
+ create: null,
+ deactivate: null,
+ drop: null,
+ out: null,
+ over: null
+ }
+});
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Droppable Test Suite</title>
+
+ <script src="../../jquery.js"></script>
+ <link rel="stylesheet" href="../../../external/qunit/qunit.css">
+ <script src="../../../external/qunit/qunit.js"></script>
+ <script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
+ <script src="../testsuite.js"></script>
+ <script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
+ <script>
+ TestHelpers.loadResources({
+ css: [ "core" ],
+ js: [
+ "ui/core.js",
+ "ui/widget.js",
+ "ui/mouse.js",
+ "ui/draggable.js",
+ "ui/droppable.js"
+ ]
+ });
+ </script>
+
+ <script src="droppable_common_deprecated.js"></script>
+ <script src="droppable_core.js"></script>
+ <script src="droppable_events.js"></script>
+ <script src="droppable_methods.js"></script>
+ <script src="droppable_options.js"></script>
+ <script src="droppable_test_helpers.js"></script>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<div id="qunit"></div>
+<div id="qunit-fixture">
+
+<div id="draggable1" style="width: 25px; height: 25px;">Draggable</div>
+<div id="droppable1" style="width: 100px; height: 100px;">Droppable</div>
+<div id="droppable2" style="width: 100px; height: 100px;">Droppable</div>
+<div style='width:1000px;height:1000px;'>&nbsp;</div>
+
+</div>
+</body>
+</html>
View
@@ -36,10 +36,8 @@ $.widget( "ui.droppable", {
widgetEventPrefix: "drop",
options: {
accept: "*",
- activeClass: false,
addClasses: true,
greedy: false,
- hoverClass: false,
scope: "default",
tolerance: "intersect",
@@ -80,7 +78,7 @@ $.widget( "ui.droppable", {
this._addToManager( o.scope );
- o.addClasses && this.element.addClass( "ui-droppable" );
+ o.addClasses && this._addClass( "ui-droppable" );
},
@@ -103,8 +101,6 @@ $.widget( "ui.droppable", {
var drop = $.ui.ddmanager.droppables[ this.options.scope ];
this._splice( drop );
-
- this.element.removeClass( "ui-droppable ui-droppable-disabled" );
},
_setOption: function( key, value ) {
@@ -125,19 +121,17 @@ $.widget( "ui.droppable", {
_activate: function( event ) {
var draggable = $.ui.ddmanager.current;
- if ( this.options.activeClass ) {
- this.element.addClass( this.options.activeClass );
- }
+
+ this._addActiveClass();
if ( draggable ){
this._trigger( "activate", event, this.ui( draggable ) );
}
},
_deactivate: function( event ) {
var draggable = $.ui.ddmanager.current;
- if ( this.options.activeClass ) {
- this.element.removeClass( this.options.activeClass );
- }
+
+ this._removeActiveClass();
if ( draggable ){
this._trigger( "deactivate", event, this.ui( draggable ) );
}
@@ -153,9 +147,7 @@ $.widget( "ui.droppable", {
}
if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
- if ( this.options.hoverClass ) {
- this.element.addClass( this.options.hoverClass );
- }
+ this._addHoverClass();
this._trigger( "over", event, this.ui( draggable ) );
}
@@ -171,9 +163,7 @@ $.widget( "ui.droppable", {
}
if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
- if ( this.options.hoverClass ) {
- this.element.removeClass( this.options.hoverClass );
- }
+ this._removeHoverClass();
this._trigger( "out", event, this.ui( draggable ) );
}
@@ -204,12 +194,9 @@ $.widget( "ui.droppable", {
}
if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
- if ( this.options.activeClass ) {
- this.element.removeClass( this.options.activeClass );
- }
- if ( this.options.hoverClass ) {
- this.element.removeClass( this.options.hoverClass );
- }
+ this._removeActiveClass();
+ this._removeHoverClass();
+
this._trigger( "drop", event, this.ui( draggable ) );
return this.element;
}
@@ -225,8 +212,25 @@ $.widget( "ui.droppable", {
position: c.position,
offset: c.positionAbs
};
- }
+ },
+ // Extension points just to make backcompat sane and avoid duplicating logic
+ // TODO: Remove in 1.13 along with call to it below
+ _addHoverClass: function() {
+ this._addClass( "ui-droppable-hover" );
+ },
+
+ _removeHoverClass: function() {
+ this._removeClass( "ui-droppable-hover" );
+ },
+
+ _addActiveClass: function() {
+ this._addClass( "ui-droppable-active" );
+ },
+
+ _removeActiveClass: function() {
+ this._removeClass( "ui-droppable-active" );
+ }
});
var intersect = (function() {
@@ -413,6 +417,43 @@ $.ui.ddmanager = {
}
};
+// DEPRECATED
+// TODO: switch return back to widget declaration at top of file when this is removed
+if ( $.uiBackCompat !== false ) {
+
+ // Backcompat for activeClass and hoverClass options
+ $.widget( "ui.droppable", $.ui.droppable, {
+ options: {
+ hoverClass: false,
+ activeClass: false
+ },
+ _addActiveClass: function() {
+ this._super();
+ if ( this.options.activeClass ) {
+ this.element.addClass( this.options.activeClass );
+ }
+ },
+ _removeActiveClass: function() {
+ this._super();
+ if ( this.options.activeClass ) {
+ this.element.removeClass( this.options.activeClass );
+ }
+ },
+ _addHoverClass: function() {
+ this._super();
+ if ( this.options.hoverClass ) {
+ this.element.addClass( this.options.hoverClass );
+ }
+ },
+ _removeHoverClass: function() {
+ this._super();
+ if ( this.options.hoverClass ) {
+ this.element.removeClass( this.options.hoverClass );
+ }
+ }
+ });
+}
+
return $.ui.droppable;
}));

0 comments on commit f58277a

Please sign in to comment.