Skip to content

NTNGL-5467 | Enable List Tile Drag and Drop #6973

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NicholasHallman wants to merge 9 commits into
base: main
Choose a base branch
from
Open

NTNGL-5467 | Enable List Tile Drag and Drop #6973

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f81a7ac
add demo and enable drag and drop
NicholasHallman May 5, 2026
255ff60
rearrange drag and selection
NicholasHallman May 5, 2026
1600984
fix for selectable and drag
NicholasHallman May 5, 2026
a6929fc
drag and drop changes
NicholasHallman May 12, 2026
9f3ffee
only force show handle for draggable
NicholasHallman May 12, 2026
e54ead3
force tile header when draggable
NicholasHallman May 12, 2026
300a4b8
limit to tiles
NicholasHallman May 12, 2026
22c0502
Merge branch 'main' into NTNGL-5467/tile-mouse-drag-logic
NicholasHallman May 13, 2026
a31dd6a
demo for actions
NicholasHallman May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions components/list/demo/list-drag-and-drop-position.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '../list-item-content.js';
import '../list-item.js';
import '../list.js';
import { html, LitElement } from 'lit';
import { css, html, LitElement, nothing } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { repeat } from 'lit/directives/repeat.js';

Expand All @@ -14,10 +14,21 @@ class ListDemoDragAndDropPosition extends LitElement {
// below are for demonstration only
grid: { type: Boolean },
hrefs: { type: Boolean },
selectable: { type: Boolean }
selectable: { type: Boolean },
tiles: { type: Boolean },
tileHeader: { type: Boolean, attribute: 'tile-header' },
actions: { type: Boolean, attribute: 'actions' }
};
}

static styles = css`
.actions-containter {
align-items: center;
display: flex;
height: 100%;
}
`;

constructor() {
super();
this.list = [
Expand Down Expand Up @@ -73,11 +84,13 @@ class ListDemoDragAndDropPosition extends LitElement {
?grid="${this.grid}"
@d2l-list-item-position-change="${this._moveItems}"
?add-button="${this.addButton}"
add-button-text="${ifDefined(addButtonText)}">
add-button-text="${ifDefined(addButtonText)}"
layout="${this.tiles ? 'tiles' : 'list'}">
${repeat(this.list, (item) => item.key, (item) => html`
<d2l-list-item
key="${ifDefined(item.key)}"
draggable
?tile-header="${this.tileHeader}"
?selectable="${this.selectable}"
drag-handle-text="${item.name}"
href="${ifDefined(this.hrefs ? item.href : undefined)}"
Expand All @@ -87,6 +100,9 @@ class ListDemoDragAndDropPosition extends LitElement {
<div>${item.name}</div>
<div slot="secondary">${item.secondary}</div>
</d2l-list-item-content>
${ this.actions ? html`
<div class="actions-containter" slot="actions"><d2l-button-icon text="More" icon="tier1:gear"></d2l-button-icon></div>
` : nothing}
</d2l-list-item>
`)}
</d2l-list>
Expand Down
42 changes: 42 additions & 0 deletions components/list/demo/list-drag-and-drop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,48 @@ <h2>Always Show Handle</h2>
</template>
</d2l-demo-snippet>

<h1>Tile Drag and Drop</h1>

<h2>Position Change Event</h2>

<d2l-demo-snippet>
<template>
<d2l-demo-list-drag-and-drop-position tiles hrefs tile-header></d2l-demo-list-drag-and-drop-position>
</template>
</d2l-demo-snippet>

<h2>With Selection</h2>

<d2l-demo-snippet>
<template>
<d2l-demo-list-drag-and-drop-position tiles hrefs tile-header selectable></d2l-demo-list-drag-and-drop-position>
</template>
</d2l-demo-snippet>

<h2>Without title</h2>

<d2l-demo-snippet>
<template>
<d2l-demo-list-drag-and-drop-position tiles hrefs selectable></d2l-demo-list-drag-and-drop-position>
</template>
</d2l-demo-snippet>

<h2>Without hrefs</h2>

<d2l-demo-snippet>
<template>
<d2l-demo-list-drag-and-drop-position tiles tile-header></d2l-demo-list-drag-and-drop-position>
</template>
</d2l-demo-snippet>

<h2>With Actions</h2>

<d2l-demo-snippet>
<template>
<d2l-demo-list-drag-and-drop-position tiles tile-header actions></d2l-demo-list-drag-and-drop-position>
</template>
</d2l-demo-snippet>

</d2l-demo-page>

<script>
Expand Down
30 changes: 30 additions & 0 deletions components/list/list-item-drag-drop-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,12 +311,33 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
width: 100%;
z-index: 1;
}

.d2l-list-item-drag-bottom-marker {
bottom: -6px;
}
.d2l-list-item-drag-top-marker {
top: -6px;
}

:host([layout="tile"]) .d2l-list-item-drag-bottom-marker,
:host([layout="tile"]) .d2l-list-item-drag-top-marker {
height: 100%;
pointer-events: none;
position: absolute;
width: auto;
z-index: 1;
}

:host([layout="tile"]) .d2l-list-item-drag-bottom-marker {
bottom: 0;
right: calc(-0.9rem + 3px);
}
:host([layout="tile"]) .d2l-list-item-drag-top-marker {
left: calc(-0.9rem + 3px);
top: 0;
}


.d2l-list-item-drag-area {
cursor: move;
height: 100%;
Expand All @@ -326,6 +347,11 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
grid-template-columns: 100%;
grid-template-rows: 1rem 1fr 1fr 1rem;
}
:host([layout="tile"]) .d2l-list-item-drag-drop-grid {
display: grid;
grid-template-columns: 1rem 1fr 1fr 1rem;
grid-template-rows: 100%;
}
Comment on lines +350 to +354
Copy link
Copy Markdown
Contributor Author

@NicholasHallman NicholasHallman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This rotates the drop targets

:host([_drop-location="7"]) {
z-index: 1; /* drop target border must render on top of next adjacent border */
}
Expand All @@ -344,6 +370,10 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
d2l-list-item-drag-handle {
opacity: 0;
}
:host([layout="tile"][draggable]) d2l-list-item-drag-handle {
opacity: 1;
}

:host([selected]) d2l-list-item-drag-handle,
:host([current]) d2l-list-item-drag-handle,
:host([_drag-handle-show-always]) d2l-list-item-drag-handle,
Expand Down
33 changes: 27 additions & 6 deletions components/list/list-item-generic-layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,7 @@ class ListItemGenericLayout extends LitElement {
/**
* @ignore
*/
layout: { type: String, reflect: true }

layout: { type: String, reflect: true },
};
}

Expand Down Expand Up @@ -216,7 +215,21 @@ class ListItemGenericLayout extends LitElement {

:host([layout="tile"]) {
grid-template-columns:
[start control-start] minmax(0, min-content)
[start outside-control-start] minmax(0, 30px)
[outside-control-end control-start] minmax(0, min-content)
[control-end actions-start] minmax(0, auto)
[actions-end end];
grid-template-rows:
[start header-start] minmax(0, min-content)
[header-end content-start] auto
[content-end end];
height: 100%;
}

:host([layout="tile"]:not([is-draggable])) {
grid-template-columns:
[start outside-control-start] 0
[outside-control-end control-start] minmax(0, min-content)
[control-end actions-start] minmax(0, auto)
[actions-end end];
Comment on lines +229 to 234
Copy link
Copy Markdown
Contributor Author

@NicholasHallman NicholasHallman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This varient ensures that the selection box is the left most item when the drag handle isn't present. There's a fun layout issue that prevents minmax(0, min-content) from ever equalling 0. My guess is that this is due to the content below the header spanning this column and so chrome assumes the column can't have a width of 0.

grid-template-rows:
Expand Down Expand Up @@ -258,14 +271,22 @@ class ListItemGenericLayout extends LitElement {
grid-row: content-start / content-end;
}

:host([layout="tile"]) ::slotted([slot="outside-control"]) {
grid-column: outside-control-start / outside-control-end;
grid-row: start / start;
width: min-content;
}

:host([layout="tile"]) ::slotted([slot="outside-control-action"]) {
grid-column: start / end;
grid-row: start / start;
}

:host(:not([layout="tile"])) slot[name="header"],
:host([layout="tile"]) slot[name="add-top"],
:host([layout="tile"]) slot[name="control-container"],
:host([layout="tile"]) slot[name="before-content"],
:host([layout="tile"]) slot[name="outside-control"],
:host([layout="tile"]) slot[name="outside-control-action"],
:host([layout="tile"]) slot[name="expand-collapse"],
:host([layout="tile"]) slot[name="drop-target"],
:host([layout="tile"]) slot[name="nested"],
:host([layout="tile"]) slot[name="add"] {
display: none;
Expand Down
4 changes: 4 additions & 0 deletions components/list/list-item-link-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
:host([action-href]:not([action-href=""])) [slot="outside-control-action"] {
grid-column-end: control-end;
}

:host([action-href]:not([action-href=""])[layout="tile"]) [slot="outside-control-action"] {
grid-column-end: end;
}
` ];

super.styles && styles.unshift(super.styles);
Expand Down
20 changes: 18 additions & 2 deletions components/list/list-item-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
transform: translateY(-10px);
transition: opacity 200ms ease-out, transform 0ms ease-out 300ms;
}

:host([layout="tile"][_selection-when-interacted]) [slot="control"]:hover,
:host([layout="tile"][_selection-when-interacted][_focusing]) [slot="control"],
:host([layout="tile"][_selection-when-interacted][_force-show-selection]) [slot="control"],
Expand All @@ -484,6 +485,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
transition: opacity 200ms ease-out, transform 200ms ease-out;
}

:host([layout="tile"][draggable][tile-header]) [slot="control"] {
margin: 0.25rem 0;
}

@media (prefers-reduced-motion: reduce) {
:host([layout="tile"][_selection-when-interacted]) [slot="control"] {
transform: none;
Expand Down Expand Up @@ -587,6 +592,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
:host([layout="tile"]) d2l-selection-input {
margin: 0;
}

:host([layout="tile"][draggable]) d2l-selection-input {
margin: auto;
}
Comment on lines +596 to +598
Copy link
Copy Markdown
Contributor Author

@NicholasHallman NicholasHallman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the drag handle makes the title bar slightly taller so we need to tell the selection to center itself

:host([layout="tile"]:not([tile-header])) d2l-selection-input {
--d2l-input-checkbox-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
--d2l-input-radio-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
Expand Down Expand Up @@ -724,6 +733,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
this._hasListItemContent = !!this.shadowRoot.querySelector('slot:not([name])').assignedElements({ flatten: true })
.find(elem => elem.tagName === 'D2L-LIST-ITEM-CONTENT');
}
if (this.draggable && this.layout === 'tile' && this.tileHeader === false) {
this.tileHeader = true;
}
}

focus() {
Expand Down Expand Up @@ -975,6 +987,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
data-separators="${ifDefined(this._separators)}"
indentation="${ifDefined(this.indentation)}"
?grid-active="${this.role === 'row'}"
?selectable="${this.selectable}"
?is-draggable="${this.draggable}"
layout="${this.layout}"
?no-primary-action="${this.noPrimaryAction}">
${this._showAddButton && this.first ? html`
Expand Down Expand Up @@ -1038,10 +1052,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
</d2l-list-item-generic-layout>
`;

const isDraggableTile = this.draggable && this.layout === 'tile';

return html`
${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker ?verticle="${isDraggableTile}"></d2l-list-item-placement-marker>`)}
${this.draggable ? html`<div class="d2l-list-item-drag-image">${innerView}</div>` : innerView}
${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker ?verticle="${isDraggableTile}"></d2l-list-item-placement-marker>`)}
${this._displayKeyboardTooltip && tooltipForId ? html`<d2l-tooltip align="start" announced for="${tooltipForId}" for-type="descriptor">${this.localizeHTML('components.list.keyboard')}</d2l-tooltip>` : ''}
${this.draggable ? this._renderDragMultipleImage() : nothing}
`;
Expand Down
52 changes: 52 additions & 0 deletions components/list/list-item-placement-marker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,30 @@ import { css, html, LitElement } from 'lit';

class ListItemPlacementMarker extends LitElement {

static properties = {
verticle: { type: Boolean, reflect: true }
};

static get styles() {
return css`
:host {
display: block;
}

:host([verticle]) {
height: 100%;
}

:host([hidden]) {
display: none;
}

:host([verticle]) .d2l-list-drag-marker-line {
height: 100%;
margin: -1px 0;
width: 12px;
}

.d2l-list-drag-marker-line {
height: 12px;
margin-left: -1px;
Expand All @@ -22,6 +36,12 @@ class ListItemPlacementMarker extends LitElement {
width: 100%;
}

:host([verticle]) .d2l-list-drag-marker-linecap {
height: 4px;
margin-inline: 0 -2px;
width: 12px;
}

.d2l-list-drag-marker-linecap {
fill: var(--d2l-color-celestine);
height: 12px;
Expand All @@ -30,6 +50,11 @@ class ListItemPlacementMarker extends LitElement {
width: 4px;
}

:host([verticle]) .d2l-list-drag-marker-circle {
margin-inline: 0 0;
}


.d2l-list-drag-marker-circle {
fill: none;
height: 12px;
Expand All @@ -43,10 +68,37 @@ class ListItemPlacementMarker extends LitElement {
display: flex;
flex-wrap: nowrap;
}

:host([verticle]) .d2l-list-drag-marker {
flex-direction: column;
height: 100%;
}
`;
}

constructor() {
super();
this.verticle = false;
}

render() {

if (this.verticle) {
return html`
<div class="d2l-list-drag-marker">
<svg class="d2l-list-drag-marker-circle">
<circle cx="50%" cy="50%" r="3.8px"/>
</svg>
<svg class="d2l-list-drag-marker-line">
<line x1="50%" y1="0" x2="50%" y2="100%" />
</svg>
<svg class="d2l-list-drag-marker-linecap">
<circle cx="50%" cy="50%" r="1.5px"/>
</svg>
</div>
`;
}

return html`
<div class="d2l-list-drag-marker">
<svg class="d2l-list-drag-marker-circle">
Expand Down