diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 33 |
1 files changed, 32 insertions, 1 deletions
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index bf814cb31..7362a65ae 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -49,6 +49,8 @@ export class CollectionCardView extends CollectionSubView() { _draggerRef = React.createRef<HTMLDivElement>(); @observable _maxRowCount = 10; @observable docsBeingDragged: number[] = []; + @observable draggedIndex: number = -1; + @observable overIndex: number = -1; static getButtonGroup(groupFieldKey: 'chat' | 'star' | 'idea' | 'like', doc: Doc): number | undefined { return Cast(doc[groupFieldKey], 'number', null); @@ -491,6 +493,35 @@ export class CollectionCardView extends CollectionSubView() { return <FontAwesomeIcon icon = 'star' size= 'lg' style = {{color: isActive ? '#4476f7' : '#323232'}}/>; } }; + + @action +onDragStart = (index: number) => { + this.draggedIndex = index; +}; + +@action +onDragOver = (index: number) => { + if (this.draggedIndex !== index) { + this.overIndex = index; + } +}; + +@action +onDrop = () => { + if (this.draggedIndex !== -1 && this.overIndex !== -1) { + const draggedDoc = this.sortedDocs[this.draggedIndex]; + this.sortedDocs.splice(this.draggedIndex, 1); + this.sortedDocs.splice(this.overIndex, 0, draggedDoc); + this.draggedIndex = -1; + this.overIndex = -1; + } +}; + +@action +onDragEnd = () => { + this.draggedIndex = -1; + this.overIndex = -1; +}; /** * Actually renders all the cards */ @@ -523,7 +554,7 @@ export class CollectionCardView extends CollectionSubView() { return ( <div key={doc[Id]} - className={`card-item${isSelected ? '-active' : anySelected ? '-inactive' : ''}`} + className={`card-item${isSelected ? '-active' : anySelected ? '-inactive' : ''}`} onPointerUp={() => { // this turns off documentDecorations during a transition, then turns them back on afterward. SnappingManager.SetIsResizing(this.Document[Id]); |