Improve drag and drop multiple logic

This commit is contained in:
Chen-I Lim 2020-10-28 14:40:27 -07:00
parent 264ed20aa3
commit b79cb62fc3

View file

@ -586,37 +586,38 @@ class BoardComponent extends React.Component<Props, State> {
const {draggedCards} = this const {draggedCards} = this
const optionId = card.properties[activeView.groupById] const optionId = card.properties[activeView.groupById]
if (draggedCards.length < 1) { if (draggedCards.length < 1 || draggedCards.includes(card)) {
return return
} }
const description = draggedCards.length > 1 ? `drag ${draggedCards.length} cards` : 'drag card'
// Update card order
let cardOrder = boardTree.orderedCards().map((o) => o.id)
const draggedCardIds = draggedCards.map((o) => o.id)
const firstDraggedCard = draggedCards[0]
const isDraggingDown = cardOrder.indexOf(firstDraggedCard.id) <= cardOrder.indexOf(card.id)
cardOrder = cardOrder.filter((id) => !draggedCardIds.includes(id))
let destIndex = cardOrder.indexOf(card.id)
if (firstDraggedCard.properties[boardTree.groupByProperty.id] === optionId && isDraggingDown) {
// If the cards are in the same column and dragging down, drop after the target card
destIndex += 1
}
cardOrder.splice(destIndex, 0, ...draggedCardIds)
mutator.beginUndoGroup() mutator.beginUndoGroup()
const description = draggedCards.length > 1 ? `drag ${draggedCards.length} cards` : 'drag card' // Update properties of dragged cards
const cardOrder = boardTree.orderedCards().map((o) => o.id)
for (const draggedCard of draggedCards) { for (const draggedCard of draggedCards) {
if (draggedCard.id === card.id) {
continue
}
Utils.log(`draggedCard: ${draggedCard.title}, column: ${optionId}`) Utils.log(`draggedCard: ${draggedCard.title}, column: ${optionId}`)
const oldOptionId = draggedCard.properties[boardTree.groupByProperty.id] const oldOptionId = draggedCard.properties[boardTree.groupByProperty.id]
if (optionId !== oldOptionId) { if (optionId !== oldOptionId) {
await mutator.changePropertyValue(draggedCard, boardTree.groupByProperty.id, optionId, description) await mutator.changePropertyValue(draggedCard, boardTree.groupByProperty.id, optionId, description)
} }
// Change sort position of card
const srcIndex = cardOrder.indexOf(draggedCard.id)
cardOrder.splice(srcIndex, 1)
let destIndex = cardOrder.indexOf(card.id)
if (oldOptionId === optionId && srcIndex <= destIndex) {
// If the cards are in the same column and dragging down, drop the card after the target card
destIndex += 1
}
cardOrder.splice(destIndex, 0, draggedCard.id)
} }
await mutator.changeViewCardOrder(activeView, cardOrder, description) await mutator.changeViewCardOrder(activeView, cardOrder, description)
mutator.endUndoGroup() mutator.endUndoGroup()
} }