Drag and drop multiple cdkDrag elements

[thomaslein]

Bug, feature request, or proposal

Feature request

What is the expected behavior?

Select multiple cdkDrag elements e.g with a checkbox and drag them to a cdk-drop container.

What is the current behavior?

It's only possible with one cdkDrag element at a time.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material2 7.0.1

Is there anything else we should know?

If it's possible somehow I would appreciate a working demo.

[crisbeto]

It's not possible at the moment, but we have a lot of the foundation work in place already. It still needs an API that allows consumers to start dragging programmatically.

[cedvdb]

Is there an ETA on this ?

[mlg-pmilic]

It is possible to achieve this already, by tracking checked elements and in dropped event looking for all the checked elements to transfer (in case the dragged element was checked as well), but still the UI looks wierd as only the element you are dragging is moving across the lists.

[RobinBomkampDv]

+1 for this

[Diemauerdk]

+1 here too!

[Diemauerdk]

@mlg-pmilic How do you then perform the drag and drop using code? I have experimented a bit with the moveItemInArray function but can't get it to work.

Thanks :)

[brandonreid]

So I was able to get a pretty decent interaction going for this. I'll detail how multiple selected items were moved at once, I've also got some stuff around multi select and being able to do so with CTRL/shift clicking, etc. but I won't cover all that here.

Markup:

<table class="layout-table">
  <tbody cdkDropList
        (cdkDropListDropped)="drop($event)"
        [class.dragging]="dragging">
    <tr class="item"
        *ngFor="let item of items; let i = index"
        (click)="select($event, i)"
        [class.selected]="item.selected"
        cdkDrag
        (cdkDragStarted)="onDragStart($event)">
      <div class="layout-item-drag-preview" *cdkDragPreview>
        {{ selections.length > 0 ? selections.length : 1 }}
      </div>
      <td>{{ item.text }}</td>
    </tr>
  <tbody>
</table>

In my component:

// imports...
import { CdkDragDrop, CdkDragStart, moveItemInArray } from '@angular/cdk/drag-drop';

// functions in my component...
public onDragStart(event: CdkDragStart<string[]>) {
  this.dragging = true;
}

public drop(event: CdkDragDrop<string[]>) {
  const selections = [];

  // Get the indexes for all selected items
  _.each(this.items, (item, i) => {
    if (item.selected) {
      selections.push(i);
    }
  });

  if (this.selections.length > 1) {
    // If multiple selections exist
    let newIndex = event.currentIndex;
    let indexCounted = false;

    // create an array of the selected items
    // set newCurrentIndex to currentIndex - (any items before that index)
    this.selections = _.sortBy(this.selections, s => s);
    const selectedItems = _.map(this.selections, s => {
      if (s < event.currentIndex) {
        newIndex --;
        indexCounted = true;
      }
      return this.items[s];
    });

    // correct the index
    if (indexCounted) {
      newIndex++;
    }

    // remove selected items
    this.items = _.without(this.items, ...selectedItems);

    // add selected items at new index
    this.items.splice(newIndex, 0, ...selectedItems);
  } else {
    // If a single selection
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }

  this.dragging = false;
}

Sass styles:

$active: blue;
$frame: gray;
$red: red;

.layout-table {
  .layout-item {
    background-color: white;
    &.selected {
      background-color: lighten($active, 15%);
    }
  }
  tbody.dragging {
    .layout-item.selected:not(.cdk-drag-placeholder) {
      opacity: 0.2;
      td {
        border-color: rgba($frame, 0.2);
      }
    }
  }
}
.layout-item-drag-preview {
  background: $red;
  color: white;
  font-weight: bold;
  padding: 0.25em 0.5em 0.2em;
  border-radius: 30px;
  display: inline-block;
}
.cdk-drop-list-dragging .cdk-drag {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

So the other selected items get faded out while dragging multiple, removing or display: none caused the placeholder to be offset from the mouse and this affect seemed less disorientating anyway.

Hope this helps!

[Diemauerdk]

@brandonreid Thanks for sharing your solution, it looks nice!

[vyacheslavzhabitsky]

there is one way for me to drag a few elements in one selection, it to create wrapper and push there items which should be dragged.
small pseudo code:

<wrapper cdkDrag *ngIf="selectedItems > 1">
  <draggableItem *ngFor="selectedItems"> 
  </draggableItem>
</wrapper>

issue of this, that will be reinitialize of <draggableItem> in dynamic usage, but mb it can be solved via 'portal' from cdk

not sure that is possible to implement native programmatically dragging under the hood, bcs it require native mouse event and target...

[srikanthmadasu]

See if this library can help you - https://www.npmjs.com/package/aui-select-box

[william-holt]

So I was able to get a pretty decent interaction going for this. I'll detail how multiple selected items were moved at once, I've also got some stuff around multi select and being able to do so with CTRL/shift clicking, etc. but I won't cover all that here.

Markup:

<table class="layout-table">
  <tbody cdkDropList
        (cdkDropListDropped)="drop($event)"
        [class.dragging]="dragging">
    <tr class="item"
        *ngFor="let item of items; let i = index"
        (click)="select($event, i)"
        [class.selected]="item.selected"
        cdkDrag
        (cdkDragStarted)="onDragStart($event)">
      <div class="layout-item-drag-preview" *cdkDragPreview>
        {{ selections.length > 0 ? selections.length : 1 }}
      </div>
      <td>{{ item.text }}</td>
    </tr>
  <tbody>
</table>

In my component:

// imports...
import { CdkDragDrop, CdkDragStart, moveItemInArray } from '@angular/cdk/drag-drop';

// functions in my component...
public onDragStart(event: CdkDragStart<string[]>) {
  this.dragging = true;
}

public drop(event: CdkDragDrop<string[]>) {
  const selections = [];

  // Get the indexes for all selected items
  _.each(this.items, (item, i) => {
    if (item.selected) {
      selections.push(i);
    }
  });

  if (this.selections.length > 1) {
    // If multiple selections exist
    let newIndex = event.currentIndex;
    let indexCounted = false;

    // create an array of the selected items
    // set newCurrentIndex to currentIndex - (any items before that index)
    this.selections = _.sortBy(this.selections, s => s);
    const selectedItems = _.map(this.selections, s => {
      if (s < event.currentIndex) {
        newIndex --;
        indexCounted = true;
      }
      return this.items[s];
    });

    // correct the index
    if (indexCounted) {
      newIndex++;
    }

    // remove selected items
    this.items = _.without(this.items, ...selectedItems);

    // add selected items at new index
    this.items.splice(newIndex, 0, ...selectedItems);
  } else {
    // If a single selection
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }

  this.dragging = false;
}

Sass styles:

$active: blue;
$frame: gray;
$red: red;

.layout-table {
  .layout-item {
    background-color: white;
    &.selected {
      background-color: lighten($active, 15%);
    }
  }
  tbody.dragging {
    .layout-item.selected:not(.cdk-drag-placeholder) {
      opacity: 0.2;
      td {
        border-color: rgba($frame, 0.2);
      }
    }
  }
}
.layout-item-drag-preview {
  background: $red;
  color: white;
  font-weight: bold;
  padding: 0.25em 0.5em 0.2em;
  border-radius: 30px;
  display: inline-block;
}
.cdk-drop-list-dragging .cdk-drag {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

So the other selected items get faded out while dragging multiple, removing or display: none caused the placeholder to be offset from the mouse and this affect seemed less disorientating anyway.

Hope this helps!

Hey @brandonreid, What was the logic behind the select() function in the html? I'm attempting to implement a similar solution and would love to see what your process was here. Thanks!

[brandonreid]

@william-holt yeah multi select with shift/ctrl can be pretty mind bending. You've got to track the last item clicked for shift select, track what's been shift selected in case the user shift clicks further, etc. I'll post the code, it's got some comments in there so hopefully it helps.

public dataLayoutItems: Array<DataLayoutItem> = []; // the items in my sortable list

private currentSelectionSpan: number[] = [];
private lastSingleSelection: number;
public selections: number[] = [];

// handles "ctrl/command + a" to select all
@HostListener('document:keydown', ['$event'])
private handleKeyboardEvent(event: KeyboardEvent) {
  if (
    this.selections.length > 0 &&
    (event.key === 'a' && event.ctrlKey ||
     event.key === 'a' && event.metaKey) &&
     document.activeElement.nodeName !== 'INPUT') {
      event.preventDefault();
      this.selectAll();
  }
}

public select(event, index) {
  if (event.srcElement.localName !== 'td' &&
      event.srcElement.localName !== 'strong') {
    return;
  }

  let itemSelected = true;
  const shiftSelect = event.shiftKey &&
                      (this.lastSingleSelection || this.lastSingleSelection === 0) &&
                      this.lastSingleSelection !== index;

  if (!this.selections || this.selections.length < 1) {
    // if nothing selected yet, init selection mode and select.
    this.selections = [index];
    this.lastSingleSelection = index;
  } else if (event.metaKey || event.ctrlKey) {
    // if holding ctrl / cmd
    const alreadySelected = _.find(this.selections, s => s === index);
    if (alreadySelected) {
      _.remove(this.selections, s => s === index);
      itemSelected = false;
      this.lastSingleSelection = null;
    } else {
      this.selections.push(index);
      this.lastSingleSelection = index;
    }
  } else if (shiftSelect) {
    // if holding shift, add group to selection and currentSelectionSpan
    const newSelectionBefore = index < this.lastSingleSelection;
    const count = (
      newSelectionBefore ? this.lastSingleSelection - (index - 1) :
                            (index + 1) - this.lastSingleSelection
    );

    // clear previous shift selection
    if (this.currentSelectionSpan && this.currentSelectionSpan.length > 0) {
      _.each(this.currentSelectionSpan, i => {
        this.dataLayoutItems[i].selected = false;
        _.remove(this.selections, s => s === i);
      });
      this.currentSelectionSpan = [];
    }
    // build new currentSelectionSpan
    _.times(count, c => {
      if (newSelectionBefore) {
        this.currentSelectionSpan.push(this.lastSingleSelection - c);
      } else {
        this.currentSelectionSpan.push(this.lastSingleSelection + c);
      }
    });
    // select currentSelectionSpan
    _.each(this.currentSelectionSpan, (i) => {
      this.dataLayoutItems[i].selected = true;
      if (!_.includes(this.selections, i)) {
        this.selections.push(i);
      }
    });
  } else {
    // Select only this item or clear selections.
    const alreadySelected = _.find(this.selections, s => s === index);
    if ((!alreadySelected && !event.shiftKey) ||
        (alreadySelected && this.selections.length > 1)) {
      this.clearSelection();
      this.selections = [index];
      this.lastSingleSelection = index;
    } else if (alreadySelected) {
      this.clearSelection();
      itemSelected = false;
    }
  }

  if (!event.shiftKey) {
    // clear currentSelectionSpan if not holding shift
    this.currentSelectionSpan = [];
  }

  // select clicked item
  this.dataLayoutItems[index].selected = itemSelected;
}

public clearSelection() {
  _.each(this.dataLayoutItems, (l) => {
    if (l.selected) { l.selected = false; }
  });
  this.selections = [];
  this.currentSelectionSpan = [];
  this.lastSingleSelection = null;
}

public selectAll() {
  this.selections = [];
  _.each(this.dataLayoutItems, (l, i) => {
    l.selected = true;
    this.selections.push(i);
  });
  this.currentSelectionSpan = [];
  this.lastSingleSelection = null;
}