Skip to content

Commit f58277a

Browse files
arschmitzarschmitz
committed
Droppable: Add classes option
Ref #7053 Ref gh-1411
1 parent e9bb449 commit f58277a

11 files changed

+169
-41
lines changed

‎demos/droppable/accepted-elements.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,10 @@
2020
$( "#draggable, #draggable-nonvalid" ).draggable();
2121
$( "#droppable" ).droppable({
2222
accept: "#draggable",
23-
activeClass: "ui-state-hover",
24-
hoverClass: "ui-state-active",
23+
classes: {
24+
"ui-droppable-active": "ui-state-active",
25+
"ui-droppable-hover": "ui-state-hover"
26+
},
2527
drop: function( event, ui ) {
2628
$( this )
2729
.addClass( "ui-state-highlight" )

‎demos/droppable/photo-manager.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@
4747
// let the trash be droppable, accepting the gallery items
4848
$trash.droppable({
4949
accept: "#gallery > li",
50-
activeClass: "ui-state-highlight",
50+
classes: {
51+
"ui-droppable-active": "ui-state-highlight"
52+
},
5153
drop: function( event, ui ) {
5254
deleteImage( ui.draggable );
5355
}
@@ -56,7 +58,9 @@
5658
// let the gallery be droppable as well, accepting items from the trash
5759
$gallery.droppable({
5860
accept: "#trash li",
59-
activeClass: "custom-state-active",
61+
classes: {
62+
"ui-droppable-active": "custom-state-active"
63+
},
6064
drop: function( event, ui ) {
6165
recycleImage( ui.draggable );
6266
}

‎demos/droppable/propagation.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,10 @@
2121
$( "#draggable" ).draggable();
2222

2323
$( "#droppable, #droppable-inner" ).droppable({
24-
activeClass: "ui-state-hover",
25-
hoverClass: "ui-state-active",
24+
classes: {
25+
"ui-droppable-active": "ui-state-active",
26+
"ui-droppable-hover": "ui-state-hover"
27+
},
2628
drop: function( event, ui ) {
2729
$( this )
2830
.addClass( "ui-state-highlight" )
@@ -34,8 +36,10 @@
3436

3537
$( "#droppable2, #droppable2-inner" ).droppable({
3638
greedy: true,
37-
activeClass: "ui-state-hover",
38-
hoverClass: "ui-state-active",
39+
classes: {
40+
"ui-droppable-active": "ui-state-active",
41+
"ui-droppable-hover": "ui-state-hover"
42+
},
3943
drop: function( event, ui ) {
4044
$( this )
4145
.addClass( "ui-state-highlight" )

‎demos/droppable/revert.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,10 @@
2121
$( "#draggable2" ).draggable({ revert: "invalid" });
2222

2323
$( "#droppable" ).droppable({
24-
activeClass: "ui-state-default",
25-
hoverClass: "ui-state-hover",
24+
classes: {
25+
"ui-droppable-active": "ui-state-active",
26+
"ui-droppable-hover": "ui-state-hover"
27+
},
2628
drop: function( event, ui ) {
2729
$( this )
2830
.addClass( "ui-state-highlight" )

‎demos/droppable/shopping-cart.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,10 @@
2828
helper: "clone"
2929
});
3030
$( "#cart ol" ).droppable({
31-
activeClass: "ui-state-default",
32-
hoverClass: "ui-state-hover",
31+
classes: {
32+
"ui-droppable-active": "ui-state-active",
33+
"ui-droppable-hover": "ui-state-hover"
34+
},
3335
accept: ":not(.ui-sortable-helper)",
3436
drop: function( event, ui ) {
3537
$( this ).find( ".placeholder" ).remove();

‎demos/droppable/visual-feedback.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@
2020
$(function() {
2121
$( "#draggable" ).draggable();
2222
$( "#droppable" ).droppable({
23-
hoverClass: "ui-state-hover",
23+
classes: {
24+
"ui-droppable-hover": "ui-state-hover"
25+
},
2426
drop: function( event, ui ) {
2527
$( this )
2628
.addClass( "ui-state-highlight" )
@@ -32,7 +34,9 @@
3234
$( "#draggable2" ).draggable();
3335
$( "#droppable2" ).droppable({
3436
accept: "#draggable2",
35-
activeClass: "ui-state-default",
37+
classes: {
38+
"ui-droppable-active": "ui-state-default"
39+
},
3640
drop: function( event, ui ) {
3741
$( this )
3842
.addClass( "ui-state-highlight" )
@@ -66,7 +70,7 @@ <h3>Feedback on activating draggable:</h3>
6670
</div>
6771

6872
<div class="demo-description">
69-
<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>
73+
<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>
7074
</div>
7175
</body>
7276
</html>

‎tests/unit/droppable/droppable.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
<title>jQuery UI Droppable Test Suite</title>
66

77
<script src="../../jquery.js"></script>
8+
<script>
9+
$.uiBackCompat = false;
10+
</script>
811
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
912
<script src="../../../external/qunit/qunit.js"></script>
1013
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>

‎tests/unit/droppable/droppable_common.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
TestHelpers.commonWidgetTests( "droppable", {
22
defaults: {
33
accept: "*",
4-
activeClass: false,
54
addClasses: true,
65
classes: {},
76
disabled: false,
87
greedy: false,
9-
hoverClass: false,
108
scope: "default",
119
tolerance: "intersect",
1210

‎tests/unit/droppable/droppable_common_deprecated.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
TestHelpers.commonWidgetTests( "droppable", {
2+
defaults: {
3+
accept: "*",
4+
activeClass: false,
5+
addClasses: true,
6+
classes: {},
7+
disabled: false,
8+
greedy: false,
9+
hoverClass: false,
10+
scope: "default",
11+
tolerance: "intersect",
12+
13+
// callbacks
14+
activate: null,
15+
create: null,
16+
deactivate: null,
17+
drop: null,
18+
out: null,
19+
over: null
20+
}
21+
});

‎tests/unit/droppable/droppable_deprecated.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Droppable Test Suite</title>
6+
7+
<script src="../../jquery.js"></script>
8+
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
9+
<script src="../../../external/qunit/qunit.js"></script>
10+
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
11+
<script src="../testsuite.js"></script>
12+
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
13+
<script>
14+
TestHelpers.loadResources({
15+
css: [ "core" ],
16+
js: [
17+
"ui/core.js",
18+
"ui/widget.js",
19+
"ui/mouse.js",
20+
"ui/draggable.js",
21+
"ui/droppable.js"
22+
]
23+
});
24+
</script>
25+
26+
<script src="droppable_common_deprecated.js"></script>
27+
<script src="droppable_core.js"></script>
28+
<script src="droppable_events.js"></script>
29+
<script src="droppable_methods.js"></script>
30+
<script src="droppable_options.js"></script>
31+
<script src="droppable_test_helpers.js"></script>
32+
33+
<script src="../swarminject.js"></script>
34+
</head>
35+
<body>
36+
37+
<div id="qunit"></div>
38+
<div id="qunit-fixture">
39+
40+
<div id="draggable1" style="width: 25px; height: 25px;">Draggable</div>
41+
<div id="droppable1" style="width: 100px; height: 100px;">Droppable</div>
42+
<div id="droppable2" style="width: 100px; height: 100px;">Droppable</div>
43+
<div style='width:1000px;height:1000px;'>&nbsp;</div>
44+
45+
</div>
46+
</body>
47+
</html>

‎ui/droppable.js

Lines changed: 65 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,8 @@ $.widget( "ui.droppable", {
3636
widgetEventPrefix: "drop",
3737
options: {
3838
accept: "*",
39-
activeClass: false,
4039
addClasses: true,
4140
greedy: false,
42-
hoverClass: false,
4341
scope: "default",
4442
tolerance: "intersect",
4543

@@ -80,7 +78,7 @@ $.widget( "ui.droppable", {
8078

8179
this._addToManager( o.scope );
8280

83-
o.addClasses && this.element.addClass( "ui-droppable" );
81+
o.addClasses && this._addClass( "ui-droppable" );
8482

8583
},
8684

@@ -103,8 +101,6 @@ $.widget( "ui.droppable", {
103101
var drop = $.ui.ddmanager.droppables[ this.options.scope ];
104102

105103
this._splice( drop );
106-
107-
this.element.removeClass( "ui-droppable ui-droppable-disabled" );
108104
},
109105

110106
_setOption: function( key, value ) {
@@ -125,19 +121,17 @@ $.widget( "ui.droppable", {
125121

126122
_activate: function( event ) {
127123
var draggable = $.ui.ddmanager.current;
128-
if ( this.options.activeClass ) {
129-
this.element.addClass( this.options.activeClass );
130-
}
124+
125+
this._addActiveClass();
131126
if ( draggable ){
132127
this._trigger( "activate", event, this.ui( draggable ) );
133128
}
134129
},
135130

136131
_deactivate: function( event ) {
137132
var draggable = $.ui.ddmanager.current;
138-
if ( this.options.activeClass ) {
139-
this.element.removeClass( this.options.activeClass );
140-
}
133+
134+
this._removeActiveClass();
141135
if ( draggable ){
142136
this._trigger( "deactivate", event, this.ui( draggable ) );
143137
}
@@ -153,9 +147,7 @@ $.widget( "ui.droppable", {
153147
}
154148

155149
if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
156-
if ( this.options.hoverClass ) {
157-
this.element.addClass( this.options.hoverClass );
158-
}
150+
this._addHoverClass();
159151
this._trigger( "over", event, this.ui( draggable ) );
160152
}
161153

@@ -171,9 +163,7 @@ $.widget( "ui.droppable", {
171163
}
172164

173165
if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
174-
if ( this.options.hoverClass ) {
175-
this.element.removeClass( this.options.hoverClass );
176-
}
166+
this._removeHoverClass();
177167
this._trigger( "out", event, this.ui( draggable ) );
178168
}
179169

@@ -204,12 +194,9 @@ $.widget( "ui.droppable", {
204194
}
205195

206196
if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
207-
if ( this.options.activeClass ) {
208-
this.element.removeClass( this.options.activeClass );
209-
}
210-
if ( this.options.hoverClass ) {
211-
this.element.removeClass( this.options.hoverClass );
212-
}
197+
this._removeActiveClass();
198+
this._removeHoverClass();
199+
213200
this._trigger( "drop", event, this.ui( draggable ) );
214201
return this.element;
215202
}
@@ -225,8 +212,25 @@ $.widget( "ui.droppable", {
225212
position: c.position,
226213
offset: c.positionAbs
227214
};
228-
}
215+
},
229216

217+
// Extension points just to make backcompat sane and avoid duplicating logic
218+
// TODO: Remove in 1.13 along with call to it below
219+
_addHoverClass: function() {
220+
this._addClass( "ui-droppable-hover" );
221+
},
222+
223+
_removeHoverClass: function() {
224+
this._removeClass( "ui-droppable-hover" );
225+
},
226+
227+
_addActiveClass: function() {
228+
this._addClass( "ui-droppable-active" );
229+
},
230+
231+
_removeActiveClass: function() {
232+
this._removeClass( "ui-droppable-active" );
233+
}
230234
});
231235

232236
var intersect = (function() {
@@ -413,6 +417,43 @@ $.ui.ddmanager = {
413417
}
414418
};
415419

420+
// DEPRECATED
421+
// TODO: switch return back to widget declaration at top of file when this is removed
422+
if ( $.uiBackCompat !== false ) {
423+
424+
// Backcompat for activeClass and hoverClass options
425+
$.widget( "ui.droppable", $.ui.droppable, {
426+
options: {
427+
hoverClass: false,
428+
activeClass: false
429+
},
430+
_addActiveClass: function() {
431+
this._super();
432+
if ( this.options.activeClass ) {
433+
this.element.addClass( this.options.activeClass );
434+
}
435+
},
436+
_removeActiveClass: function() {
437+
this._super();
438+
if ( this.options.activeClass ) {
439+
this.element.removeClass( this.options.activeClass );
440+
}
441+
},
442+
_addHoverClass: function() {
443+
this._super();
444+
if ( this.options.hoverClass ) {
445+
this.element.addClass( this.options.hoverClass );
446+
}
447+
},
448+
_removeHoverClass: function() {
449+
this._super();
450+
if ( this.options.hoverClass ) {
451+
this.element.removeClass( this.options.hoverClass );
452+
}
453+
}
454+
});
455+
}
456+
416457
return $.ui.droppable;
417458

418459
}));

0 commit comments

Comments
 (0)