Skip to content
Permalink
Browse files

Droppable: Add classes option

Ref #7053
Ref gh-1411
  • Loading branch information...
arschmitz committed Jan 1, 2015
1 parent e9bb449 commit f58277a521ae41b1d3e054a419ef5fda85e7db21
@@ -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 @@ <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>
@@ -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>
@@ -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.
You can’t perform that action at this time.