diff --git a/src/components/item/item-reorder-gesture.ts b/src/components/item/item-reorder-gesture.ts index fea1caa3d5..f87dde0a4a 100644 --- a/src/components/item/item-reorder-gesture.ts +++ b/src/components/item/item-reorder-gesture.ts @@ -34,6 +34,9 @@ export class ItemReorderGesture { } private onDragStart(ev: any): boolean { + if (this.selectedItemEle) { + return false; + } let reorderElement = ev.target; if (reorderElement.nodeName !== 'ION-REORDER') { return false; @@ -90,7 +93,7 @@ export class ItemReorderGesture { if (overItem) { let toIndex = indexForItem(overItem); if (toIndex !== undefined && (toIndex !== this.lastToIndex || this.emptyZone)) { - let fromIndex = indexForItem(this.selectedItemEle); + let fromIndex = indexForItem(selectedItem); this.lastToIndex = toIndex; this.lastYcoord = posY; this.emptyZone = false; @@ -106,13 +109,18 @@ export class ItemReorderGesture { (selectedItem.style)[CSS.transform] = `translateY(${ydiff}px)`; } - private onDragEnd() { - if (!this.selectedItemEle) { + private onDragEnd(ev: any) { + let selectedItem = this.selectedItemEle; + if (!selectedItem) { return; } + if (ev) { + ev.preventDefault(); + ev.stopPropagation(); + } let toIndex = this.lastToIndex; - let fromIndex = indexForItem(this.selectedItemEle); + let fromIndex = indexForItem(selectedItem); let reorderInactive = () => { this.selectedItemEle.style.transition = ''; this.selectedItemEle.classList.remove(ITEM_REORDER_ACTIVE); @@ -120,7 +128,7 @@ export class ItemReorderGesture { }; if (toIndex === fromIndex) { - this.selectedItemEle.style.transition = 'transform 200ms ease-in-out'; + selectedItem.style.transition = 'transform 200ms ease-in-out'; setTimeout(reorderInactive, 200); } else { reorderInactive(); @@ -145,7 +153,7 @@ export class ItemReorderGesture { * @private */ destroy() { - this.onDragEnd(); + this.onDragEnd(null); this.events.unlistenAll(); this.events = null; this.reorderList = null; diff --git a/src/components/item/item-reorder.scss b/src/components/item/item-reorder.scss index 6620ea9504..01f9fb82c8 100644 --- a/src/components/item/item-reorder.scss +++ b/src/components/item/item-reorder.scss @@ -16,9 +16,9 @@ ion-reorder { font-size: 1.7em; opacity: .25; - transform: translate3d(120%, 0, 0); + transform: translate3d(160%, 0, 0); - transition: transform 125ms ease-in; + transition: transform 140ms ease-in; pointer-events: all; touch-action: manipulation; diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts index 4ca806ed03..50f7e38629 100644 --- a/src/components/item/item-reorder.ts +++ b/src/components/item/item-reorder.ts @@ -1,4 +1,4 @@ -import { Component, Directive, ElementRef, EventEmitter, forwardRef, Input, NgZone, Renderer, Inject, Optional, Output } from '@angular/core'; +import { Component, Directive, ElementRef, EventEmitter, forwardRef, HostListener, Input, NgZone, Renderer, Inject, Optional, Output } from '@angular/core'; import { Content } from '../content/content'; import { CSS, zoneRafFrames } from '../../util/dom'; @@ -328,6 +328,13 @@ export class Reorder { return findReorderItem(node, null); } + @HostListener('click', ['$event']) + onClick(ev) { + // Stop propagation if click event reaches ion-reorder + ev.preventDefault(); + ev.stopPropagation(); + } + } /** diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss index 4babd809b6..d35a4404b0 100644 --- a/src/components/item/item.ios.scss +++ b/src/components/item/item.ios.scss @@ -33,7 +33,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; font-size: $item-ios-body-text-font-size; color: $list-ios-text-color; background-color: $list-ios-background-color; - transition-duration: 200ms; + transition: background-color 200ms linear; } .item-ios.activated { diff --git a/src/components/item/test/reorder/main.html b/src/components/item/test/reorder/main.html index e884285a11..0148f37c7a 100644 --- a/src/components/item/test/reorder/main.html +++ b/src/components/item/test/reorder/main.html @@ -22,7 +22,7 @@