mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Draggable: allow draggable to defer destroying itself upon DOM removal until after stop is fired. Fixes #6889 - Draggable: Cursor doesn't revert to pre-dragging state after revert action when original element is removed.
This commit is contained in:
Mike Sherov
parent
dd58f9832b
commit
d345a0d7db
@ -316,8 +316,12 @@ $.extend( $.simulate.prototype, {
|
||||
this.simulateEvent( document, "mousemove", coord );
|
||||
}
|
||||
|
||||
if ( $.contains( document, target ) ) {
|
||||
this.simulateEvent( target, "mouseup", coord );
|
||||
this.simulateEvent( target, "click", coord );
|
||||
} else {
|
||||
this.simulateEvent( document, "mouseup", coord );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -75,9 +75,13 @@ test( "resizable handle with complex markup (#8756 / #8757)", function() {
|
||||
});
|
||||
|
||||
test( "#8269: Removing draggable element on drop", function() {
|
||||
expect( 1 );
|
||||
expect( 2 );
|
||||
|
||||
var element = $( "#draggable1" ).wrap( "<div id='wrapper' />" ).draggable(),
|
||||
var element = $( "#draggable1" ).wrap( "<div id='wrapper' />" ).draggable({
|
||||
stop: function() {
|
||||
ok( true, "stop still called despite element being removed from DOM on drop" );
|
||||
}
|
||||
}),
|
||||
dropOffset = $( "#droppable" ).offset();
|
||||
|
||||
$( "#droppable" ).droppable({
|
||||
|
||||
@ -451,6 +451,33 @@ test( "{ cursor: 'move' }", function() {
|
||||
equal( after, before, "after drag: cursor restored" );
|
||||
});
|
||||
|
||||
test( "#6889: Cursor doesn't revert to pre-dragging state after revert action when original element is removed", function() {
|
||||
function getCursor() {
|
||||
return $( "body" ).css( "cursor" );
|
||||
}
|
||||
|
||||
expect( 2 );
|
||||
|
||||
var element = $( "#draggable1" ).wrap( "<div id='wrapper' />" ).draggable({
|
||||
cursor: "move",
|
||||
revert: true,
|
||||
revertDuration: 0,
|
||||
start: function() {
|
||||
notEqual( getCursor(), expected, "start callback: cursor '" + expected + "'" );
|
||||
$( "#wrapper" ).remove();
|
||||
},
|
||||
stop: function() {
|
||||
equal( getCursor(), expected, "after drag: cursor restored" );
|
||||
}
|
||||
}),
|
||||
expected = getCursor();
|
||||
|
||||
element.simulate( "drag", {
|
||||
dx: -1,
|
||||
dy: -1
|
||||
});
|
||||
});
|
||||
|
||||
test( "cursor, default, switching after initialization", function() {
|
||||
expect( 3 );
|
||||
|
||||
|
||||
9
ui/jquery.ui.core.js
vendored
9
ui/jquery.ui.core.js
vendored
@ -276,10 +276,15 @@ $.ui.plugin = {
|
||||
proto.plugins[ i ].push( [ option, set[ i ] ] );
|
||||
}
|
||||
},
|
||||
call: function( instance, name, args ) {
|
||||
call: function( instance, name, args, allowDisconnected ) {
|
||||
var i,
|
||||
set = instance.plugins[ name ];
|
||||
if ( !set || !instance.element[ 0 ].parentNode || instance.element[ 0 ].parentNode.nodeType === 11 ) {
|
||||
|
||||
if ( !set ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( !allowDisconnected && ( !instance.element[ 0 ].parentNode || instance.element[ 0 ].parentNode.nodeType === 11 ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
79
ui/jquery.ui.draggable.js
vendored
79
ui/jquery.ui.draggable.js
vendored
@ -66,6 +66,10 @@ $.widget("ui.draggable", $.ui.mouse, {
|
||||
},
|
||||
|
||||
_destroy: function() {
|
||||
if ( ( this.helper || this.element ).is( ".ui-draggable-dragging" ) ) {
|
||||
this.destroyOnClear = true;
|
||||
return;
|
||||
}
|
||||
this.element.removeClass( "ui-draggable ui-draggable-dragging ui-draggable-disabled" );
|
||||
this._mouseDestroy();
|
||||
},
|
||||
@ -233,11 +237,6 @@ $.widget("ui.draggable", $.ui.mouse, {
|
||||
this.dropped = false;
|
||||
}
|
||||
|
||||
//if the original element is no longer in the DOM don't bother to continue (see #8269)
|
||||
if ( this.options.helper === "original" && !$.contains( this.element[ 0 ].ownerDocument, this.element[ 0 ] ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if((this.options.revert === "invalid" && !dropped) || (this.options.revert === "valid" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element, dropped))) {
|
||||
$(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() {
|
||||
if(that._trigger("stop", event) !== false) {
|
||||
@ -554,13 +553,16 @@ $.widget("ui.draggable", $.ui.mouse, {
|
||||
}
|
||||
this.helper = null;
|
||||
this.cancelHelperRemoval = false;
|
||||
if ( this.destroyOnClear ) {
|
||||
this.destroy();
|
||||
}
|
||||
},
|
||||
|
||||
// From now on bulk stuff - mainly helpers
|
||||
|
||||
_trigger: function(type, event, ui) {
|
||||
ui = ui || this._uiHash();
|
||||
$.ui.plugin.call(this, type, [event, ui]);
|
||||
$.ui.plugin.call( this, type, [ event, ui, this ], true );
|
||||
//The absolute position has to be recalculated after plugins
|
||||
if(type === "drag") {
|
||||
this.positionAbs = this._convertPositionTo("absolute");
|
||||
@ -582,9 +584,9 @@ $.widget("ui.draggable", $.ui.mouse, {
|
||||
});
|
||||
|
||||
$.ui.plugin.add("draggable", "connectToSortable", {
|
||||
start: function(event, ui) {
|
||||
start: function( event, ui, inst ) {
|
||||
|
||||
var inst = $(this).draggable( "instance" ), o = inst.options,
|
||||
var o = inst.options,
|
||||
uiSortable = $.extend({}, ui, { item: inst.element });
|
||||
inst.sortables = [];
|
||||
$(o.connectToSortable).each(function() {
|
||||
@ -600,11 +602,12 @@ $.ui.plugin.add("draggable", "connectToSortable", {
|
||||
});
|
||||
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
stop: function( event, ui, inst ) {
|
||||
|
||||
//If we are still over the sortable, we fake the stop event of the sortable, but also remove helper
|
||||
var inst = $(this).draggable( "instance" ),
|
||||
uiSortable = $.extend({}, ui, { item: inst.element });
|
||||
var uiSortable = $.extend( {}, ui, {
|
||||
item: inst.element
|
||||
});
|
||||
|
||||
$.each(inst.sortables, function() {
|
||||
if(this.instance.isOver) {
|
||||
@ -637,9 +640,9 @@ $.ui.plugin.add("draggable", "connectToSortable", {
|
||||
});
|
||||
|
||||
},
|
||||
drag: function(event, ui) {
|
||||
drag: function( event, ui, inst ) {
|
||||
|
||||
var inst = $(this).draggable( "instance" ), that = this;
|
||||
var that = this;
|
||||
|
||||
$.each(inst.sortables, function() {
|
||||
|
||||
@ -739,15 +742,17 @@ $.ui.plugin.add("draggable", "connectToSortable", {
|
||||
});
|
||||
|
||||
$.ui.plugin.add("draggable", "cursor", {
|
||||
start: function() {
|
||||
var t = $("body"), o = $(this).draggable( "instance" ).options;
|
||||
start: function( event, ui, instance ) {
|
||||
var t = $( "body" ),
|
||||
o = instance.options;
|
||||
|
||||
if (t.css("cursor")) {
|
||||
o._cursor = t.css("cursor");
|
||||
}
|
||||
t.css("cursor", o.cursor);
|
||||
},
|
||||
stop: function() {
|
||||
var o = $(this).draggable( "instance" ).options;
|
||||
stop: function( event, ui, instance ) {
|
||||
var o = instance.options;
|
||||
if (o._cursor) {
|
||||
$("body").css("cursor", o._cursor);
|
||||
}
|
||||
@ -755,15 +760,16 @@ $.ui.plugin.add("draggable", "cursor", {
|
||||
});
|
||||
|
||||
$.ui.plugin.add("draggable", "opacity", {
|
||||
start: function(event, ui) {
|
||||
var t = $(ui.helper), o = $(this).draggable( "instance" ).options;
|
||||
start: function( event, ui, instance ) {
|
||||
var t = $( ui.helper ),
|
||||
o = instance.options;
|
||||
if(t.css("opacity")) {
|
||||
o._opacity = t.css("opacity");
|
||||
}
|
||||
t.css("opacity", o.opacity);
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
var o = $(this).draggable( "instance" ).options;
|
||||
stop: function( event, ui, instance ) {
|
||||
var o = instance.options;
|
||||
if(o._opacity) {
|
||||
$(ui.helper).css("opacity", o._opacity);
|
||||
}
|
||||
@ -771,15 +777,15 @@ $.ui.plugin.add("draggable", "opacity", {
|
||||
});
|
||||
|
||||
$.ui.plugin.add("draggable", "scroll", {
|
||||
start: function() {
|
||||
var i = $(this).draggable( "instance" );
|
||||
start: function( event, ui, i ) {
|
||||
if(i.scrollParent[0] !== document && i.scrollParent[0].tagName !== "HTML") {
|
||||
i.overflowOffset = i.scrollParent.offset();
|
||||
}
|
||||
},
|
||||
drag: function( event ) {
|
||||
drag: function( event, ui, i ) {
|
||||
|
||||
var i = $(this).draggable( "instance" ), o = i.options, scrolled = false;
|
||||
var o = i.options,
|
||||
scrolled = false;
|
||||
|
||||
if(i.scrollParent[0] !== document && i.scrollParent[0].tagName !== "HTML") {
|
||||
|
||||
@ -827,10 +833,9 @@ $.ui.plugin.add("draggable", "scroll", {
|
||||
});
|
||||
|
||||
$.ui.plugin.add("draggable", "snap", {
|
||||
start: function() {
|
||||
start: function( event, ui, i ) {
|
||||
|
||||
var i = $(this).draggable( "instance" ),
|
||||
o = i.options;
|
||||
var o = i.options;
|
||||
|
||||
i.snapElements = [];
|
||||
|
||||
@ -847,10 +852,9 @@ $.ui.plugin.add("draggable", "snap", {
|
||||
});
|
||||
|
||||
},
|
||||
drag: function(event, ui) {
|
||||
drag: function( event, ui, inst ) {
|
||||
|
||||
var ts, bs, ls, rs, l, r, t, b, i, first,
|
||||
inst = $(this).draggable( "instance" ),
|
||||
o = inst.options,
|
||||
d = o.snapTolerance,
|
||||
x1 = ui.offset.left, x2 = x1 + inst.helperProportions.width,
|
||||
@ -922,9 +926,9 @@ $.ui.plugin.add("draggable", "snap", {
|
||||
});
|
||||
|
||||
$.ui.plugin.add("draggable", "stack", {
|
||||
start: function() {
|
||||
start: function( event, ui, instance ) {
|
||||
var min,
|
||||
o = $(this).draggable( "instance" ).options,
|
||||
o = instance.options,
|
||||
group = $.makeArray($(o.stack)).sort(function(a,b) {
|
||||
return (parseInt($(a).css("zIndex"),10) || 0) - (parseInt($(b).css("zIndex"),10) || 0);
|
||||
});
|
||||
@ -940,15 +944,18 @@ $.ui.plugin.add("draggable", "stack", {
|
||||
});
|
||||
|
||||
$.ui.plugin.add("draggable", "zIndex", {
|
||||
start: function(event, ui) {
|
||||
var t = $(ui.helper), o = $(this).draggable( "instance" ).options;
|
||||
start: function( event, ui, instance ) {
|
||||
var t = $( ui.helper ),
|
||||
o = instance.options;
|
||||
|
||||
if(t.css("zIndex")) {
|
||||
o._zIndex = t.css("zIndex");
|
||||
}
|
||||
t.css("zIndex", o.zIndex);
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
var o = $(this).draggable( "instance" ).options;
|
||||
stop: function( event, ui, instance ) {
|
||||
var o = instance.options;
|
||||
|
||||
if(o._zIndex) {
|
||||
$(ui.helper).css("zIndex", o._zIndex);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user