library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Droppable: Style updates

Browse Source 
Ref #14246
This commit is contained in:
Alexander Schmitz 2015-08-24 08:59:32 -04:00
parent 85ff520560
commit 0cab9f0a2f
8 changed files with 116 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/unit/droppable/common-deprecated.js
View File

@ -23,6 +23,6 @@ common.testWidget( "droppable", {
out: null,
over: null
}
});
} );
} );

2
tests/unit/droppable/common.js
View File

@ -21,6 +21,6 @@ common.testWidget( "droppable", {
out: null,
over: null
}
});
} );
} );

22
tests/unit/droppable/core.js
View File

@ -4,26 +4,26 @@ define( [
"ui/widgets/droppable"
], function( $, testHelper ) {
module("droppable: core");
module( "droppable: core" );
test("element types", function() {
var typeNames = ("p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form" +
test( "element types", function() {
var typeNames = ( "p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form" +
",table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr" +
",acronym,code,samp,kbd,var,img,hr" +
",input,button,label,select,iframe").split(",");
",input,button,label,select,iframe" ).split( "," );
expect( typeNames.length );
$.each(typeNames, function(i) {
var typeName = typeNames[i],
el = $(document.createElement(typeName)).appendTo("body");
$.each( typeNames, function( i ) {
var typeName = typeNames[ i ],
el = $( document.createElement( typeName ) ).appendTo( "body" );
(typeName === "table" && el.append("<tr><td>content</td></tr>"));
( typeName === "table" && el.append( "<tr><td>content</td></tr>" ) );
el.droppable();
testHelper.shouldDrop();
el.droppable("destroy");
el.droppable( "destroy" );
el.remove();
});
});
} );
} );
} );

6
tests/unit/droppable/events.js
View File

@ -13,7 +13,7 @@ test( "droppable destruction/recreation on drop event", function( assert ) {
drop: function() {
var element = $( this ),
newDroppable = $( "<div>" )
.css({ width: 100, height: 100 })
.css( { width: 100, height: 100 } )
.text( "Droppable" );
element.after( newDroppable );
element.remove();
@ -33,10 +33,10 @@ test( "droppable destruction/recreation on drop event", function( assert ) {
draggable.simulate( "drag", {
dx: dx,
dy: dy
});
} );
assert.lacksClasses( droppable2, "active", "subsequent droppable no longer active" );
});
} );
// todo: comment the following in when ready to actually test
/*

6
tests/unit/droppable/helper.js
View File

@ -5,13 +5,15 @@ define( [
return $.extend( helper, {
shouldDrop: function() {
// todo: actually implement this
ok(true, "missing test - untested code is broken code");
ok( true, "missing test - untested code is broken code" );
},
shouldNotDrop: function() {
// todo: actually implement this
ok(true, "missing test - untested code is broken code");
ok( true, "missing test - untested code is broken code" );
}
} );

80
tests/unit/droppable/methods.js
View File

@ -4,78 +4,78 @@ define( [
"ui/widgets/droppable"
], function( $, testHelper ) {
module("droppable: methods");
module( "droppable: methods" );
test("init", function() {
test( "init", function() {
expect( 5 );
$("<div></div>").appendTo("body").droppable().remove();
ok(true, ".droppable() called on element");
$( "<div></div>" ).appendTo( "body" ).droppable().remove();
ok( true, ".droppable() called on element" );
$([]).droppable();
ok(true, ".droppable() called on empty collection");
$( [] ).droppable();
ok( true, ".droppable() called on empty collection" );
$("<div></div>").droppable();
ok(true, ".droppable() called on disconnected DOMElement");
$( "<div></div>" ).droppable();
ok( true, ".droppable() called on disconnected DOMElement" );
$("<div></div>").droppable().droppable("option", "foo");
ok(true, "arbitrary option getter after init");
$( "<div></div>" ).droppable().droppable( "option", "foo" );
ok( true, "arbitrary option getter after init" );
$("<div></div>").droppable().droppable("option", "foo", "bar");
ok(true, "arbitrary option setter after init");
});
$( "<div></div>" ).droppable().droppable( "option", "foo", "bar" );
ok( true, "arbitrary option setter after init" );
} );
test("destroy", function() {
test( "destroy", function() {
expect( 4 );
$("<div></div>").appendTo("body").droppable().droppable("destroy").remove();
ok(true, ".droppable('destroy') called on element");
$( "<div></div>" ).appendTo( "body" ).droppable().droppable( "destroy" ).remove();
ok( true, ".droppable('destroy') called on element" );
$([]).droppable().droppable("destroy");
ok(true, ".droppable('destroy') called on empty collection");
$( [] ).droppable().droppable( "destroy" );
ok( true, ".droppable('destroy') called on empty collection" );
$("<div></div>").droppable().droppable("destroy");
ok(true, ".droppable('destroy') called on disconnected DOMElement");
$( "<div></div>" ).droppable().droppable( "destroy" );
ok( true, ".droppable('destroy') called on disconnected DOMElement" );
var expected = $("<div></div>").droppable(),
actual = expected.droppable("destroy");
equal(actual, expected, "destroy is chainable");
});
var expected = $( "<div></div>" ).droppable(),
actual = expected.droppable( "destroy" );
equal( actual, expected, "destroy is chainable" );
} );
test("enable", function() {
expect(7);
test( "enable", function() {
expect( 7 );
var el, expected, actual;
el = $("#droppable1").droppable({ disabled: true });
el = $( "#droppable1" ).droppable( { disabled: true } );
testHelper.shouldNotDrop();
el.droppable("enable");
el.droppable( "enable" );
testHelper.shouldDrop();
equal(el.droppable("option", "disabled"), false, "disabled option getter");
el.droppable("destroy");
el.droppable({ disabled: true });
equal( el.droppable( "option", "disabled" ), false, "disabled option getter" );
el.droppable( "destroy" );
el.droppable( { disabled: true } );
testHelper.shouldNotDrop();
el.droppable("option", "disabled", false);
equal(el.droppable("option", "disabled"), false, "disabled option setter");
el.droppable( "option", "disabled", false );
equal( el.droppable( "option", "disabled" ), false, "disabled option setter" );
testHelper.shouldDrop();
expected = $("<div></div>").droppable(),
actual = expected.droppable("enable");
equal(actual, expected, "enable is chainable");
});
expected = $( "<div></div>" ).droppable(),
actual = expected.droppable( "enable" );
equal( actual, expected, "enable is chainable" );
} );
test( "disable", function( assert ) {
expect( 10 );
var actual, expected,
element = $( "#droppable1" ).droppable({ disabled: false });
element = $( "#droppable1" ).droppable( { disabled: false } );
testHelper.shouldDrop();
element.droppable( "disable" );
testHelper.shouldNotDrop();
equal( element.droppable( "option", "disabled" ), true, "disabled option getter" );
element.droppable( "destroy" );
element.droppable({ disabled: false });
element.droppable( { disabled: false } );
testHelper.shouldDrop();
element.droppable( "option", "disabled", true );
assert.lacksClasses( element.droppable( "widget" ), "ui-state-disabled" );
@ -87,6 +87,6 @@ test( "disable", function( assert ) {
expected = $( "<div></div>" ).droppable();
actual = expected.droppable( "disable" );
equal( actual, expected, "disable is chainable" );
});
} );
} );

58
tests/unit/droppable/options.js
View File

@ -24,23 +24,23 @@ test( "activeClass", function() {
*/
test( "{ addClasses: true }, default", function( assert ) {
expect( 1 );
var el = $( "<div />" ).droppable({ addClasses: true });
var el = $( "<div />" ).droppable( { addClasses: true } );
assert.hasClasses( el, "ui-droppable" );
el.droppable( "destroy" );
});
} );
test( "{ addClasses: false }", function( assert ) {
expect( 1 );
var el = $( "<div />" ).droppable({ addClasses: false });
var el = $( "<div />" ).droppable( { addClasses: false } );
assert.lacksClasses( el, "ui-droppable" );
el.droppable( "destroy" );
});
} );
test( "scope", function() {
expect( 4 );
var droppableOffset, draggableOffset, oldDraggableOffset, dx, dy,
draggable1 = $( "<div />" ).appendTo( "#qunit-fixture" ).draggable({ revert: "invalid" }),
draggable1 = $( "<div />" ).appendTo( "#qunit-fixture" ).draggable( { revert: "invalid" } ),
draggable2 = $( "<div />" ).appendTo( "#qunit-fixture" ).droppable(),
droppable = $( "<div />" ).appendTo( "#qunit-fixture" ).droppable(),
newScope = "test";
@ -57,7 +57,7 @@ test( "scope", function() {
draggable1.simulate( "drag", {
dx: dx,
dy: dy
});
} );
draggableOffset = draggable1.offset();
equal( draggableOffset.left, droppableOffset.left );
@ -72,12 +72,12 @@ test( "scope", function() {
draggable2.simulate( "drag", {
dx: dx,
dy: dy
});
} );
draggableOffset = draggable2.offset();
equal( draggableOffset.left, oldDraggableOffset.left );
equal( draggableOffset.top, oldDraggableOffset.top );
});
} );
/*
test( "greedy", function() {
ok(false, 'missing test - untested code is broken code');
@ -109,7 +109,7 @@ test( "tolerance, intersect", function() {
draggable = $( "<div />" )
.appendTo( "#qunit-fixture" )
.css({
.css( {
width: 10,
height: 10,
position: "absolute",
@ -118,32 +118,32 @@ test( "tolerance, intersect", function() {
// Droppable: droppable region is offset by draggables margin
marginTop: 3,
marginLeft: 3
})
} )
.draggable();
droppable = $( "<div />" )
.appendTo( "#qunit-fixture" )
.css({ width: 10, height: 10, position: "absolute", top: 13, left: 13 })
.droppable({ tolerance: "intersect" });
.css( { width: 10, height: 10, position: "absolute", top: 13, left: 13 } )
.droppable( { tolerance: "intersect" } );
$.each( dataset, function() {
var data = this;
draggable.css({
draggable.css( {
top: 0,
left: 0
});
} );
droppable.off( "drop" ).on( "drop", function() {
equal( true, data[ 2 ], data[ 3 ] );
});
} );
$( draggable ).simulate( "drag", {
dx: data[ 0 ],
dy: data[ 1 ]
});
});
});
} );
} );
} );
test( "tolerance, pointer", function() {
expect( 3 );
@ -162,40 +162,40 @@ test( "tolerance, pointer", function() {
draggable = $( "<div />" )
.appendTo( "#qunit-fixture" )
.css({ width: 10, height: 10, position: "absolute" })
.css( { width: 10, height: 10, position: "absolute" } )
.draggable();
droppable = $( "<div />" )
.appendTo( "#qunit-fixture" )
.css({ width: 10, height: 10, position: "absolute", top: 5, left: 5 })
.droppable({ tolerance: "pointer" });
.css( { width: 10, height: 10, position: "absolute", top: 5, left: 5 } )
.droppable( { tolerance: "pointer" } );
$.each( dataset, function() {
var data = this;
droppable.off( "drop" ).on( "drop", function() {
equal( true, data[ 2 ], data[ 3 ] );
});
} );
$( draggable ).simulate( "drag", {
dx: ( data[ 0 ] - $( draggable ).position().left ),
dy: ( data[ 1 ] - $( draggable ).position().top )
});
});
} );
} );
// Http://bugs.jqueryui.com/ticket/4977 - tolerance, pointer - bug when pointer outside draggable
draggable.css({ top: 0, left: 0 }).draggable( "option", "axis", "x" );
droppable.css({ top: 15, left: 15 });
draggable.css( { top: 0, left: 0 } ).draggable( "option", "axis", "x" );
droppable.css( { top: 15, left: 15 } );
droppable.off( "drop" ).on( "drop", function() {
ok( true, "drop fires as long as pointer is within droppable" );
});
} );
$( draggable ).simulate( "drag", {
dx: 10,
dy: 10
});
});
} );
} );
/*
test( "tolerance, touch", function() {

47
ui/widgets/droppable.js
View File

@ -13,11 +13,11 @@
//>>docs: http://api.jqueryui.com/droppable/
//>>demos: http://jqueryui.com/droppable/
(function( factory ) {
( function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([
define( [
"jquery",
"./draggable",
"./mouse",
@ -29,7 +29,7 @@
// Browser globals
factory( jQuery );
}
}(function( $ ) {
}( function( $ ) {
$.widget( "ui.droppable", {
version: "@VERSION",
@ -63,9 +63,11 @@ $.widget( "ui.droppable", {
this.proportions = function( /* valueToWrite */ ) {
if ( arguments.length ) {
// Store the droppable's proportions
proportions = arguments[ 0 ];
} else {
// Retrieve or derive the droppable's proportions
return proportions ?
proportions :
@ -83,6 +85,7 @@ $.widget( "ui.droppable", {
},
_addToManager: function( scope ) {
// Add the reference and positions to the manager
$.ui.ddmanager.droppables[ scope ] = $.ui.ddmanager.droppables[ scope ] || [];
$.ui.ddmanager.droppables[ scope ].push( this );
@ -123,7 +126,7 @@ $.widget( "ui.droppable", {
var draggable = $.ui.ddmanager.current;
this._addActiveClass();
if ( draggable ){
if ( draggable ) {
this._trigger( "activate", event, this.ui( draggable ) );
}
},
@ -132,7 +135,7 @@ $.widget( "ui.droppable", {
var draggable = $.ui.ddmanager.current;
this._removeActiveClass();
if ( draggable ){
if ( draggable ) {
this._trigger( "deactivate", event, this.ui( draggable ) );
}
},
@ -179,7 +182,7 @@ $.widget( "ui.droppable", {
return false;
}
this.element.find( ":data(ui-droppable)" ).not( ".ui-draggable-dragging" ).each(function() {
this.element.find( ":data(ui-droppable)" ).not( ".ui-draggable-dragging" ).each( function() {
var inst = $( this ).droppable( "instance" );
if (
inst.options.greedy &&
@ -188,7 +191,7 @@ $.widget( "ui.droppable", {
inst.accept.call( inst.element[ 0 ], ( draggable.currentItem || draggable.element ) ) &&
intersect( draggable, $.extend( inst, { offset: inst.element.offset() } ), inst.options.tolerance, event )
) { childrenIntersection = true; return false; }
});
} );
if ( childrenIntersection ) {
return false;
}
@ -231,9 +234,9 @@ $.widget( "ui.droppable", {
_removeActiveClass: function() {
this._removeClass( "ui-droppable-active" );
}
});
} );
var intersect = (function() {
var intersect = ( function() {
function isOverAxis( x, reference, size ) {
return ( x >= reference ) && ( x < ( reference + size ) );
}
@ -277,7 +280,7 @@ var intersect = (function() {
return false;
}
};
})();
} )();
/*
This manager tracks offsets of draggables and droppables
@ -318,7 +321,7 @@ $.ui.ddmanager = {
}
m[ i ].offset = m[ i ].element.offset();
m[ i ].proportions({ width: m[ i ].element[ 0 ].offsetWidth, height: m[ i ].element[ 0 ].offsetHeight });
m[ i ].proportions( { width: m[ i ].element[ 0 ].offsetWidth, height: m[ i ].element[ 0 ].offsetHeight } );
}
@ -326,6 +329,7 @@ $.ui.ddmanager = {
drop: function( draggable, event ) {
var dropped = false;
// Create a copy of the droppables in case the list changes during the drop (#9116)
$.each( ( $.ui.ddmanager.droppables[ draggable.options.scope ] || [] ).slice(), function() {
@ -342,17 +346,18 @@ $.ui.ddmanager = {
this._deactivate.call( this, event );
}
});
} );
return dropped;
},
dragStart: function( draggable, event ) {
// Listen for scrolling so that if the dragging causes scrolling the position of the droppables can be recalculated (see #5003)
draggable.element.parentsUntil( "body" ).on( "scroll.droppable", function() {
if ( !draggable.options.refreshPositions ) {
$.ui.ddmanager.prepareOffsets( draggable, event );
}
});
} );
},
drag: function( draggable, event ) {
@ -376,11 +381,12 @@ $.ui.ddmanager = {
}
if ( this.options.greedy ) {
// find droppable parents with same scope
scope = this.options.scope;
parent = this.element.parents( ":data(ui-droppable)" ).filter(function() {
parent = this.element.parents( ":data(ui-droppable)" ).filter( function() {
return $( this ).droppable( "instance" ).options.scope === scope;
});
} );
if ( parent.length ) {
parentInstance = $( parent[ 0 ] ).droppable( "instance" );
@ -396,8 +402,8 @@ $.ui.ddmanager = {
}
this[ c ] = true;
this[c === "isout" ? "isover" : "isout"] = false;
this[c === "isover" ? "_over" : "_out"].call( this, event );
this[ c === "isout" ? "isover" : "isout" ] = false;
this[ c === "isover" ? "_over" : "_out" ].call( this, event );
// We just moved out of a greedy child
if ( parentInstance && c === "isout" ) {
@ -405,11 +411,12 @@ $.ui.ddmanager = {
parentInstance.isover = true;
parentInstance._over.call( parentInstance, event );
}
});
} );
},
dragStop: function( draggable, event ) {
draggable.element.parentsUntil( "body" ).off( "scroll.droppable" );
// Call prepareOffsets one final time since IE does not fire return scroll events when overflow was caused by drag (see #5003)
if ( !draggable.options.refreshPositions ) {
$.ui.ddmanager.prepareOffsets( draggable, event );
@ -451,9 +458,9 @@ if ( $.uiBackCompat !== false ) {
this.element.removeClass( this.options.hoverClass );
}
}
});
} );
}
return $.ui.droppable;
}));
} ) );