From 545bcfec8ec82340b6325a63d3b5b9e9b9c1b6ef Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 30 Mar 2016 23:40:17 -0400 Subject: [PATCH] Draggable: Fix line length issues Ref gh-1690 --- ui/widgets/draggable.js | 281 +++++++++++++++++++++++++++++----------- 1 file changed, 203 insertions(+), 78 deletions(-) diff --git a/ui/widgets/draggable.js b/ui/widgets/draggable.js index 32bf861ed..6b862d0d0 100644 --- a/ui/widgets/draggable.js +++ b/ui/widgets/draggable.js @@ -106,7 +106,8 @@ $.widget( "ui.draggable", $.ui.mouse, { this._blurActiveElement( event ); // Among others, prevent a drag on a resizable-handle - if ( this.helper || o.disabled || $( event.target ).closest( ".ui-resizable-handle" ).length > 0 ) { + if ( this.helper || o.disabled || + $( event.target ).closest( ".ui-resizable-handle" ).length > 0 ) { return false; } @@ -220,9 +221,12 @@ $.widget( "ui.draggable", $.ui.mouse, { $.ui.ddmanager.prepareOffsets( this, event ); } - this._mouseDrag( event, true ); //Execute the drag once - this causes the helper not to be visible before getting its correct position + // Execute the drag once - this causes the helper not to be visible before getting its + // correct position + this._mouseDrag( event, true ); - //If the ddmanager is used for droppables, inform the manager that dragging has started (see #5003) + // If the ddmanager is used for droppables, inform the manager that dragging has started + // (see #5003) if ( $.ui.ddmanager ) { $.ui.ddmanager.dragStart( this, event ); } @@ -291,12 +295,20 @@ $.widget( "ui.draggable", $.ui.mouse, { this.dropped = 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 ) { - that._clear(); + 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 ) { + that._clear(); + } } - } ); + ); } else { if ( this._trigger( "stop", event ) !== false ) { this._clear(); @@ -309,7 +321,8 @@ $.widget( "ui.draggable", $.ui.mouse, { _mouseUp: function( event ) { this._unblockFrames(); - //If the ddmanager is used for droppables, inform the manager that dragging has stopped (see #5003) + // If the ddmanager is used for droppables, inform the manager that dragging has stopped + // (see #5003) if ( $.ui.ddmanager ) { $.ui.ddmanager.dragStop( this, event ); } @@ -317,7 +330,8 @@ $.widget( "ui.draggable", $.ui.mouse, { // Only need to focus if the event occurred on the draggable itself, see #10527 if ( this.handleElement.is( event.target ) ) { - // The interaction is over; whether or not the click resulted in a drag, focus the element + // The interaction is over; whether or not the click resulted in a drag, + // focus the element this.element.trigger( "focus" ); } @@ -363,7 +377,9 @@ $.widget( "ui.draggable", $.ui.mouse, { this.element ); if ( !helper.parents( "body" ).length ) { - helper.appendTo( ( o.appendTo === "parent" ? this.element[ 0 ].parentNode : o.appendTo ) ); + helper.appendTo( ( o.appendTo === "parent" ? + this.element[ 0 ].parentNode : + o.appendTo ) ); } // Http://bugs.jqueryui.com/ticket/9446 @@ -373,7 +389,8 @@ $.widget( "ui.draggable", $.ui.mouse, { this._setPositionRelative(); } - if ( helper[ 0 ] !== this.element[ 0 ] && !( /(fixed|absolute)/ ).test( helper.css( "position" ) ) ) { + if ( helper[ 0 ] !== this.element[ 0 ] && + !( /(fixed|absolute)/ ).test( helper.css( "position" ) ) ) { helper.css( "position", "absolute" ); } @@ -418,11 +435,15 @@ $.widget( "ui.draggable", $.ui.mouse, { var po = this.offsetParent.offset(), document = this.document[ 0 ]; - // This is a special case where we need to modify a offset calculated on start, since the following happened: - // 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent - // 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that - // the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag - if ( this.cssPosition === "absolute" && this.scrollParent[ 0 ] !== document && $.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) { + // This is a special case where we need to modify a offset calculated on start, since the + // following happened: + // 1. The position of the helper is absolute, so it's position is calculated based on the + // next positioned parent + // 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't + // the document, which means that the scroll is included in the initial calculation of the + // offset of the parent, and never recalculated upon drag + if ( this.cssPosition === "absolute" && this.scrollParent[ 0 ] !== document && + $.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) { po.left += this.scrollParent.scrollLeft(); po.top += this.scrollParent.scrollTop(); } @@ -447,8 +468,10 @@ $.widget( "ui.draggable", $.ui.mouse, { scrollIsRootNode = this._isRootNode( this.scrollParent[ 0 ] ); return { - top: p.top - ( parseInt( this.helper.css( "top" ), 10 ) || 0 ) + ( !scrollIsRootNode ? this.scrollParent.scrollTop() : 0 ), - left: p.left - ( parseInt( this.helper.css( "left" ), 10 ) || 0 ) + ( !scrollIsRootNode ? this.scrollParent.scrollLeft() : 0 ) + top: p.top - ( parseInt( this.helper.css( "top" ), 10 ) || 0 ) + + ( !scrollIsRootNode ? this.scrollParent.scrollTop() : 0 ), + left: p.left - ( parseInt( this.helper.css( "left" ), 10 ) || 0 ) + + ( !scrollIsRootNode ? this.scrollParent.scrollLeft() : 0 ) }; }, @@ -486,8 +509,11 @@ $.widget( "ui.draggable", $.ui.mouse, { this.containment = [ $( window ).scrollLeft() - this.offset.relative.left - this.offset.parent.left, $( window ).scrollTop() - this.offset.relative.top - this.offset.parent.top, - $( window ).scrollLeft() + $( window ).width() - this.helperProportions.width - this.margins.left, - $( window ).scrollTop() + ( $( window ).height() || document.body.parentNode.scrollHeight ) - this.helperProportions.height - this.margins.top + $( window ).scrollLeft() + $( window ).width() - + this.helperProportions.width - this.margins.left, + $( window ).scrollTop() + + ( $( window ).height() || document.body.parentNode.scrollHeight ) - + this.helperProportions.height - this.margins.top ]; return; } @@ -497,7 +523,8 @@ $.widget( "ui.draggable", $.ui.mouse, { 0, 0, $( document ).width() - this.helperProportions.width - this.margins.left, - ( $( document ).height() || document.body.parentNode.scrollHeight ) - this.helperProportions.height - this.margins.top + ( $( document ).height() || document.body.parentNode.scrollHeight ) - + this.helperProportions.height - this.margins.top ]; return; } @@ -521,8 +548,10 @@ $.widget( "ui.draggable", $.ui.mouse, { isUserScrollable = /(scroll|auto)/.test( c.css( "overflow" ) ); this.containment = [ - ( parseInt( c.css( "borderLeftWidth" ), 10 ) || 0 ) + ( parseInt( c.css( "paddingLeft" ), 10 ) || 0 ), - ( parseInt( c.css( "borderTopWidth" ), 10 ) || 0 ) + ( parseInt( c.css( "paddingTop" ), 10 ) || 0 ), + ( parseInt( c.css( "borderLeftWidth" ), 10 ) || 0 ) + + ( parseInt( c.css( "paddingLeft" ), 10 ) || 0 ), + ( parseInt( c.css( "borderTopWidth" ), 10 ) || 0 ) + + ( parseInt( c.css( "paddingTop" ), 10 ) || 0 ), ( isUserScrollable ? Math.max( ce.scrollWidth, ce.offsetWidth ) : ce.offsetWidth ) - ( parseInt( c.css( "borderRightWidth" ), 10 ) || 0 ) - ( parseInt( c.css( "paddingRight" ), 10 ) || 0 ) - @@ -550,16 +579,32 @@ $.widget( "ui.draggable", $.ui.mouse, { return { top: ( - pos.top + // The absolute mouse position - this.offset.relative.top * mod + // Only for relative positioned nodes: Relative offset from element to offset parent - this.offset.parent.top * mod - // The offsetParent's offset without borders (offset + border) - ( ( this.cssPosition === "fixed" ? -this.offset.scroll.top : ( scrollIsRootNode ? 0 : this.offset.scroll.top ) ) * mod ) + + // The absolute mouse position + pos.top + + + // Only for relative positioned nodes: Relative offset from element to offset parent + this.offset.relative.top * mod + + + // The offsetParent's offset without borders (offset + border) + this.offset.parent.top * mod - + ( ( this.cssPosition === "fixed" ? + -this.offset.scroll.top : + ( scrollIsRootNode ? 0 : this.offset.scroll.top ) ) * mod ) ), left: ( - pos.left + // The absolute mouse position - this.offset.relative.left * mod + // Only for relative positioned nodes: Relative offset from element to offset parent - this.offset.parent.left * mod - // The offsetParent's offset without borders (offset + border) - ( ( this.cssPosition === "fixed" ? -this.offset.scroll.left : ( scrollIsRootNode ? 0 : this.offset.scroll.left ) ) * mod ) + + // The absolute mouse position + pos.left + + + // Only for relative positioned nodes: Relative offset from element to offset parent + this.offset.relative.left * mod + + + // The offsetParent's offset without borders (offset + border) + this.offset.parent.left * mod - + ( ( this.cssPosition === "fixed" ? + -this.offset.scroll.left : + ( scrollIsRootNode ? 0 : this.offset.scroll.left ) ) * mod ) ) }; @@ -617,12 +662,24 @@ $.widget( "ui.draggable", $.ui.mouse, { if ( o.grid ) { - //Check for grid elements set to 0 to prevent divide by 0 error causing invalid argument errors in IE (see ticket #6950) - top = o.grid[ 1 ] ? this.originalPageY + Math.round( ( pageY - this.originalPageY ) / o.grid[ 1 ] ) * o.grid[ 1 ] : this.originalPageY; - pageY = containment ? ( ( top - this.offset.click.top >= containment[ 1 ] || top - this.offset.click.top > containment[ 3 ] ) ? top : ( ( top - this.offset.click.top >= containment[ 1 ] ) ? top - o.grid[ 1 ] : top + o.grid[ 1 ] ) ) : top; - - left = o.grid[ 0 ] ? this.originalPageX + Math.round( ( pageX - this.originalPageX ) / o.grid[ 0 ] ) * o.grid[ 0 ] : this.originalPageX; - pageX = containment ? ( ( left - this.offset.click.left >= containment[ 0 ] || left - this.offset.click.left > containment[ 2 ] ) ? left : ( ( left - this.offset.click.left >= containment[ 0 ] ) ? left - o.grid[ 0 ] : left + o.grid[ 0 ] ) ) : left; + //Check for grid elements set to 0 to prevent divide by 0 error causing invalid + // argument errors in IE (see ticket #6950) + top = o.grid[ 1 ] ? this.originalPageY + Math.round( ( pageY - + this.originalPageY ) / o.grid[ 1 ] ) * o.grid[ 1 ] : this.originalPageY; + pageY = containment ? ( ( top - this.offset.click.top >= containment[ 1 ] || + top - this.offset.click.top > containment[ 3 ] ) ? + top : + ( ( top - this.offset.click.top >= containment[ 1 ] ) ? + top - o.grid[ 1 ] : top + o.grid[ 1 ] ) ) : top; + + left = o.grid[ 0 ] ? this.originalPageX + + Math.round( ( pageX - this.originalPageX ) / o.grid[ 0 ] ) * o.grid[ 0 ] : + this.originalPageX; + pageX = containment ? ( ( left - this.offset.click.left >= containment[ 0 ] || + left - this.offset.click.left > containment[ 2 ] ) ? + left : + ( ( left - this.offset.click.left >= containment[ 0 ] ) ? + left - o.grid[ 0 ] : left + o.grid[ 0 ] ) ) : left; } if ( o.axis === "y" ) { @@ -636,18 +693,38 @@ $.widget( "ui.draggable", $.ui.mouse, { return { top: ( - pageY - // The absolute mouse position - this.offset.click.top - // Click offset (relative to the element) - this.offset.relative.top - // Only for relative positioned nodes: Relative offset from element to offset parent - this.offset.parent.top + // The offsetParent's offset without borders (offset + border) - ( this.cssPosition === "fixed" ? -this.offset.scroll.top : ( scrollIsRootNode ? 0 : this.offset.scroll.top ) ) + + // The absolute mouse position + pageY - + + // Click offset (relative to the element) + this.offset.click.top - + + // Only for relative positioned nodes: Relative offset from element to offset parent + this.offset.relative.top - + + // The offsetParent's offset without borders (offset + border) + this.offset.parent.top + + ( this.cssPosition === "fixed" ? + -this.offset.scroll.top : + ( scrollIsRootNode ? 0 : this.offset.scroll.top ) ) ), left: ( - pageX - // The absolute mouse position - this.offset.click.left - // Click offset (relative to the element) - this.offset.relative.left - // Only for relative positioned nodes: Relative offset from element to offset parent - this.offset.parent.left + // The offsetParent's offset without borders (offset + border) - ( this.cssPosition === "fixed" ? -this.offset.scroll.left : ( scrollIsRootNode ? 0 : this.offset.scroll.left ) ) + + // The absolute mouse position + pageX - + + // Click offset (relative to the element) + this.offset.click.left - + + // Only for relative positioned nodes: Relative offset from element to offset parent + this.offset.relative.left - + + // The offsetParent's offset without borders (offset + border) + this.offset.parent.left + + ( this.cssPosition === "fixed" ? + -this.offset.scroll.left : + ( scrollIsRootNode ? 0 : this.offset.scroll.left ) ) ) }; @@ -936,7 +1013,8 @@ $.ui.plugin.add( "draggable", "scroll", { i.scrollParentNotHidden = i.helper.scrollParent( false ); } - if ( i.scrollParentNotHidden[ 0 ] !== i.document[ 0 ] && i.scrollParentNotHidden[ 0 ].tagName !== "HTML" ) { + if ( i.scrollParentNotHidden[ 0 ] !== i.document[ 0 ] && + i.scrollParentNotHidden[ 0 ].tagName !== "HTML" ) { i.overflowOffset = i.scrollParentNotHidden.offset(); } }, @@ -949,7 +1027,8 @@ $.ui.plugin.add( "draggable", "scroll", { if ( scrollParent !== document && scrollParent.tagName !== "HTML" ) { if ( !o.axis || o.axis !== "x" ) { - if ( ( i.overflowOffset.top + scrollParent.offsetHeight ) - event.pageY < o.scrollSensitivity ) { + if ( ( i.overflowOffset.top + scrollParent.offsetHeight ) - event.pageY < + o.scrollSensitivity ) { scrollParent.scrollTop = scrolled = scrollParent.scrollTop + o.scrollSpeed; } else if ( event.pageY - i.overflowOffset.top < o.scrollSensitivity ) { scrollParent.scrollTop = scrolled = scrollParent.scrollTop - o.scrollSpeed; @@ -957,7 +1036,8 @@ $.ui.plugin.add( "draggable", "scroll", { } if ( !o.axis || o.axis !== "y" ) { - if ( ( i.overflowOffset.left + scrollParent.offsetWidth ) - event.pageX < o.scrollSensitivity ) { + if ( ( i.overflowOffset.left + scrollParent.offsetWidth ) - event.pageX < + o.scrollSensitivity ) { scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft + o.scrollSpeed; } else if ( event.pageX - i.overflowOffset.left < o.scrollSensitivity ) { scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft - o.scrollSpeed; @@ -969,16 +1049,22 @@ $.ui.plugin.add( "draggable", "scroll", { if ( !o.axis || o.axis !== "x" ) { if ( event.pageY - $( document ).scrollTop() < o.scrollSensitivity ) { scrolled = $( document ).scrollTop( $( document ).scrollTop() - o.scrollSpeed ); - } else if ( $( window ).height() - ( event.pageY - $( document ).scrollTop() ) < o.scrollSensitivity ) { + } else if ( $( window ).height() - ( event.pageY - $( document ).scrollTop() ) < + o.scrollSensitivity ) { scrolled = $( document ).scrollTop( $( document ).scrollTop() + o.scrollSpeed ); } } if ( !o.axis || o.axis !== "y" ) { if ( event.pageX - $( document ).scrollLeft() < o.scrollSensitivity ) { - scrolled = $( document ).scrollLeft( $( document ).scrollLeft() - o.scrollSpeed ); - } else if ( $( window ).width() - ( event.pageX - $( document ).scrollLeft() ) < o.scrollSensitivity ) { - scrolled = $( document ).scrollLeft( $( document ).scrollLeft() + o.scrollSpeed ); + scrolled = $( document ).scrollLeft( + $( document ).scrollLeft() - o.scrollSpeed + ); + } else if ( $( window ).width() - ( event.pageX - $( document ).scrollLeft() ) < + o.scrollSensitivity ) { + scrolled = $( document ).scrollLeft( + $( document ).scrollLeft() + o.scrollSpeed + ); } } @@ -998,17 +1084,18 @@ $.ui.plugin.add( "draggable", "snap", { i.snapElements = []; - $( o.snap.constructor !== String ? ( o.snap.items || ":data(ui-draggable)" ) : o.snap ).each( function() { - var $t = $( this ), - $o = $t.offset(); - if ( this !== i.element[ 0 ] ) { - i.snapElements.push( { - item: this, - width: $t.outerWidth(), height: $t.outerHeight(), - top: $o.top, left: $o.left - } ); - } - } ); + $( o.snap.constructor !== String ? ( o.snap.items || ":data(ui-draggable)" ) : o.snap ) + .each( function() { + var $t = $( this ), + $o = $t.offset(); + if ( this !== i.element[ 0 ] ) { + i.snapElements.push( { + item: this, + width: $t.outerWidth(), height: $t.outerHeight(), + top: $o.top, left: $o.left + } ); + } + } ); }, drag: function( event, ui, inst ) { @@ -1026,9 +1113,16 @@ $.ui.plugin.add( "draggable", "snap", { t = inst.snapElements[ i ].top - inst.margins.top; b = t + inst.snapElements[ i ].height; - if ( x2 < l - d || x1 > r + d || y2 < t - d || y1 > b + d || !$.contains( inst.snapElements[ i ].item.ownerDocument, inst.snapElements[ i ].item ) ) { + if ( x2 < l - d || x1 > r + d || y2 < t - d || y1 > b + d || + !$.contains( inst.snapElements[ i ].item.ownerDocument, + inst.snapElements[ i ].item ) ) { if ( inst.snapElements[ i ].snapping ) { - ( inst.options.snap.release && inst.options.snap.release.call( inst.element, event, $.extend( inst._uiHash(), { snapItem: inst.snapElements[ i ].item } ) ) ); + ( inst.options.snap.release && + inst.options.snap.release.call( + inst.element, + event, + $.extend( inst._uiHash(), { snapItem: inst.snapElements[ i ].item } ) + ) ); } inst.snapElements[ i ].snapping = false; continue; @@ -1040,16 +1134,28 @@ $.ui.plugin.add( "draggable", "snap", { ls = Math.abs( l - x2 ) <= d; rs = Math.abs( r - x1 ) <= d; if ( ts ) { - ui.position.top = inst._convertPositionTo( "relative", { top: t - inst.helperProportions.height, left: 0 } ).top; + ui.position.top = inst._convertPositionTo( "relative", { + top: t - inst.helperProportions.height, + left: 0 + } ).top; } if ( bs ) { - ui.position.top = inst._convertPositionTo( "relative", { top: b, left: 0 } ).top; + ui.position.top = inst._convertPositionTo( "relative", { + top: b, + left: 0 + } ).top; } if ( ls ) { - ui.position.left = inst._convertPositionTo( "relative", { top: 0, left: l - inst.helperProportions.width } ).left; + ui.position.left = inst._convertPositionTo( "relative", { + top: 0, + left: l - inst.helperProportions.width + } ).left; } if ( rs ) { - ui.position.left = inst._convertPositionTo( "relative", { top: 0, left: r } ).left; + ui.position.left = inst._convertPositionTo( "relative", { + top: 0, + left: r + } ).left; } } @@ -1061,21 +1167,39 @@ $.ui.plugin.add( "draggable", "snap", { ls = Math.abs( l - x1 ) <= d; rs = Math.abs( r - x2 ) <= d; if ( ts ) { - ui.position.top = inst._convertPositionTo( "relative", { top: t, left: 0 } ).top; + ui.position.top = inst._convertPositionTo( "relative", { + top: t, + left: 0 + } ).top; } if ( bs ) { - ui.position.top = inst._convertPositionTo( "relative", { top: b - inst.helperProportions.height, left: 0 } ).top; + ui.position.top = inst._convertPositionTo( "relative", { + top: b - inst.helperProportions.height, + left: 0 + } ).top; } if ( ls ) { - ui.position.left = inst._convertPositionTo( "relative", { top: 0, left: l } ).left; + ui.position.left = inst._convertPositionTo( "relative", { + top: 0, + left: l + } ).left; } if ( rs ) { - ui.position.left = inst._convertPositionTo( "relative", { top: 0, left: r - inst.helperProportions.width } ).left; + ui.position.left = inst._convertPositionTo( "relative", { + top: 0, + left: r - inst.helperProportions.width + } ).left; } } if ( !inst.snapElements[ i ].snapping && ( ts || bs || ls || rs || first ) ) { - ( inst.options.snap.snap && inst.options.snap.snap.call( inst.element, event, $.extend( inst._uiHash(), { snapItem: inst.snapElements[ i ].item } ) ) ); + ( inst.options.snap.snap && + inst.options.snap.snap.call( + inst.element, + event, + $.extend( inst._uiHash(), { + snapItem: inst.snapElements[ i ].item + } ) ) ); } inst.snapElements[ i ].snapping = ( ts || bs || ls || rs || first ); @@ -1089,7 +1213,8 @@ $.ui.plugin.add( "draggable", "stack", { var min, o = instance.options, group = $.makeArray( $( o.stack ) ).sort( function( a, b ) { - return ( parseInt( $( a ).css( "zIndex" ), 10 ) || 0 ) - ( parseInt( $( b ).css( "zIndex" ), 10 ) || 0 ); + return ( parseInt( $( a ).css( "zIndex" ), 10 ) || 0 ) - + ( parseInt( $( b ).css( "zIndex" ), 10 ) || 0 ); } ); if ( !group.length ) { return; } -- 2.39.5