@brightspace-ui/core 1.209.1 → 1.212.0

package/components/list/list-item-drag-drop-mixin.js

@@ -1,23 +1,27 @@
 import { css, html } from 'lit-element/lit-element.js';
+import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { dragActions } from './list-item-drag-handle.js';
-import { findComposedAncestor } from '../../helpers/dom.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { nothing } from 'lit-html';
+import { SelectionInfo } from '../selection/selection-mixin.js';
 
-export const dropLocation = Object.freeze({
+export const moveLocations = Object.freeze({
 	above: 1,
 	below: 2,
 	first: 3,
 	last: 4,
 	shiftDown: 5,
 	shiftUp: 6,
+	nest: 7,
 	void: 0
 });
 
-const dropTargetLeaveDelay = 1000; //ms
+export const dropLocation = moveLocations; // backwards compatibility
+
+const dropTargetLeaveDelay = 1000; // ms
 const touchHoldDuration = 400; // length of time user needs to hold down touch before dragging occurs
 const scrollSensitivity = 150; // pixels between top/bottom of viewport to scroll for mobile
 
@@ -38,20 +42,16 @@ const isDragSupported = () => {
 };
 
 class DragState {
-	constructor(dragTarget) {
-		this._dragTarget = dragTarget;
+	constructor(dragTargets) {
+		this._dragTargets = dragTargets;
 		this._activeDropTarget = null;
 		this._dropTargets = new Map();
 		this._dropLocation = dropLocation.void;
 		this._time = 0;
 	}
 
-	get dragTarget() {
-		return this._dragTarget;
-	}
-
-	get dragTargetKey() {
-		return this._dragTarget && this._dragTarget.key;
+	get dragTargets() {
+		return this._dragTargets;
 	}
 
 	get dropLocation() {
@@ -117,9 +117,9 @@ class DragState {
 
 let dragState = null;
 
-function createDragState(target) {
+function createDragState(targets) {
 	clearDragState();
-	dragState = new DragState(target);
+	dragState = new DragState(targets ? targets : []);
 	return dragState;
 }
 
@@ -263,6 +263,11 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			 * @type {string}
 			 */
 			dragHandleText: { type: String, attribute: 'drag-handle-text' },
+			/**
+			 * **Drag & drop:** Whether the items can be dropped as nested children
+			 * @type {boolean}
+			 */
+			dropNested: { type: Boolean, attribute: 'drop-nested' },
 			/**
 			 * **Drag & drop:** Text to drag and drop
 			 * @type {string}
@@ -274,7 +279,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			 */
 			key: { type: String, reflect: true },
 			_draggingOver: { type: Boolean },
-			_dropLocation: { type: Number },
+			_dropLocation: { type: Number, reflect: true, attribute: '_drop-location' },
 			_focusingDragHandle: { type: Boolean },
 			_hovering: { type: Boolean },
 			_keyboardActive: { type: Boolean },
@@ -293,6 +298,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			}
 			.d2l-list-item-drag-bottom-marker,
 			.d2l-list-item-drag-top-marker {
+				pointer-events: none;
 				position: absolute;
 				width: 100%;
 				z-index: 1;
@@ -311,16 +317,16 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				display: grid;
 				grid-template-columns: 100%;
 				grid-template-rows: 1rem 1fr 1fr 1rem;
-				height: 100%;
-				position: absolute;
-				top: 0;
-				width: 100%;
-				z-index: 100;
+			}
+			:host([_drop-location="7"]) d2l-list-item-generic-layout {
+				border-radius: 6px;
+				outline: 2px solid var(--d2l-color-celestine);
 			}
 			@media only screen and (hover: hover), only screen and (pointer: fine) {
 				d2l-list-item-drag-handle {
 					opacity: 0;
 				}
+				:host([selected]) d2l-list-item-drag-handle,
 				d2l-list-item-drag-handle.d2l-hovering,
 				d2l-list-item-drag-handle.d2l-focusing {
 					opacity: 1;
@@ -335,8 +341,10 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	constructor() {
 		super();
 		this._itemDragId = getUniqueId();
+		this.draggable = false;
 		/** @ignore */
 		this.dragging = false;
+		this.dropNested = false;
 	}
 
 	connectedCallback() {
@@ -351,6 +359,10 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		super.firstUpdated(changedProperties);
 	}
 
+	activateDragHandle() {
+		this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
+	}
+
 	_annoucePositionChange(dragTargetKey, dropTargetKey, dropLocation) {
 		/** Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change). */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-position-change', {
@@ -359,6 +371,84 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		}));
 	}
 
+	_dispatchListItemsMove(sourceItems, targetItem, moveLocation, keyboardActive) {
+		if (!keyboardActive) keyboardActive = false;
+		const rootList = this._getRootList();
+		rootList.dispatchEvent(new CustomEvent('d2l-list-items-move', {
+			detail: {
+				keyboardActive: keyboardActive,
+				sourceItems: sourceItems,
+				target: {
+					item: targetItem,
+					location: moveLocation
+				}
+			},
+			bubbles: true
+		}));
+	}
+
+	_dispatchMoveListItemFirst(moveToRoot) {
+		const list = (moveToRoot ? this._getRootList() : findComposedAncestor(this, node => node.tagName === 'D2L-LIST'));
+		const items = list.getItems();
+		this._dispatchListItemsMove([this], items[0], moveLocations.above, true);
+	}
+
+	_dispatchMoveListItemLast(moveToRoot) {
+		const list = (moveToRoot ? this._getRootList() : findComposedAncestor(this, node => node.tagName === 'D2L-LIST'));
+		const items = list.getItems();
+		this._dispatchListItemsMove([this], items[items.length - 1], moveLocations.below, true);
+	}
+
+	_dispatchMoveListItemNest() {
+		const listItem = this._getPreviousListItemSibling();
+		if (listItem) {
+			this._dispatchListItemsMove([this], listItem, moveLocations.nest, true);
+		}
+	}
+
+	_dispatchMoveListItemNext() {
+		const listItem = this._getNextListItemSibling();
+		if (listItem) {
+			const nestedList = listItem._getNestedList();
+			const items = (nestedList ? nestedList.getItems() : []);
+			if (items.length > 0) {
+				this._dispatchListItemsMove([this], items[0], moveLocations.above, true);
+			} else {
+				this._dispatchListItemsMove([this], listItem, moveLocations.below, true);
+			}
+		} else {
+			const parentListItem = this._getParentListItem();
+			if (parentListItem) {
+				this._dispatchListItemsMove([this], parentListItem, moveLocations.below, true);
+			}
+		}
+	}
+
+	_dispatchMoveListItemPrevious() {
+		const listItem = this._getPreviousListItemSibling();
+		if (listItem) {
+			const nestedList = listItem._getNestedList();
+			const items = (nestedList ? nestedList.getItems() : []);
+			if (items.length > 0) {
+				this._dispatchListItemsMove([this], items[items.length - 1], moveLocations.below, true);
+			} else {
+				this._dispatchListItemsMove([this], listItem, moveLocations.above, true);
+			}
+		} else {
+			const parentListItem = this._getParentListItem();
+			if (parentListItem) {
+				this._dispatchListItemsMove([this], parentListItem, moveLocations.above, true);
+			}
+		}
+	}
+
+	_dispatchMoveListItemUnnest() {
+		const listItem = this._getParentListItem();
+		if (listItem) {
+			this._dispatchListItemsMove([this], listItem, moveLocations.below, true);
+		}
+	}
+
 	_findListItemFromCoordinates(x, y) {
 		const listNode = findComposedAncestor(this.parentNode, (node) => node && node.tagName === 'D2L-LIST');
 		return listNode.shadowRoot.elementFromPoint(x, y);
@@ -380,11 +470,27 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	_onDragEnd(e) {
+
 		const dragState = getDragState();
 		this.dragging = false;
-		if (dragState.shouldDrop(e.timeStamp)) {
-			this._annoucePositionChange(dragState.dragTargetKey, dragState.dropTargetKey, dragState.dropLocation);
+
+		// check the dropEffect in case the user cancelled by Escape while dragging ('none' set by browser)
+		if (e.dataTransfer.dropEffect !== 'none' && dragState.shouldDrop(e.timeStamp)) {
+
+			const dropTargetList = findComposedAncestor(dragState.dropTarget, node => node.tagName === 'D2L-LIST');
+			const shouldDispatchPositionChange = !dragState.dragTargets.find(dragTarget => {
+				const dragTargetList = findComposedAncestor(dragTarget, node => node.tagName === 'D2L-LIST');
+				return dragTargetList !== dropTargetList;
+			});
+
+			if (shouldDispatchPositionChange && dragState.dragTargets.length === 1) {
+				this._annoucePositionChange(dragState.dragTargets[0].key, dragState.dropTargetKey, dragState.dropLocation);
+			}
+
+			this._dispatchListItemsMove(dragState.dragTargets, dragState.dropTarget, dragState.dropLocation, false);
+
 		}
+
 		clearDragState();
 	}
 
@@ -399,15 +505,31 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				break;
 			case dragActions.up:
 				this._annoucePositionChange(this.key, null, dropLocation.shiftUp);
+				this._dispatchMoveListItemPrevious();
 				break;
 			case dragActions.down:
 				this._annoucePositionChange(this.key, null, dropLocation.shiftDown);
+				this._dispatchMoveListItemNext();
+				break;
+			case dragActions.nest:
+				this._dispatchMoveListItemNest();
+				break;
+			case dragActions.unnest:
+				this._dispatchMoveListItemUnnest();
 				break;
 			case dragActions.first:
 				this._annoucePositionChange(this.key, null, dropLocation.first);
+				this._dispatchMoveListItemFirst();
+				break;
+			case dragActions.rootFirst:
+				this._dispatchMoveListItemFirst(true);
 				break;
 			case dragActions.last:
 				this._annoucePositionChange(this.key, null, dropLocation.last);
+				this._dispatchMoveListItemLast();
+				break;
+			case dragActions.rootLast:
+				this._dispatchMoveListItemLast(true);
 				break;
 			default:
 				break;
@@ -427,13 +549,32 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			e.dataTransfer.setData('text/plain', `${this.dropText}`);
 		}
 
-		// Legacy-Edge doesn't support setDragImage. Experience is not degraded for Legacy-Edge by doing this fix.
-		if (e.dataTransfer.setDragImage) {
-			const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
-			e.dataTransfer.setDragImage(nodeImage, 50, 50);
-		}
+		const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
+		e.dataTransfer.setDragImage(nodeImage, 50, 50);
+
+		const rootList = this._getRootList(this);
 
-		createDragState(this);
+		// getSelectionInfo(false) is fast so we can quickly check the state
+		if (!rootList.dragMultiple || rootList.getSelectionInfo(false).state === SelectionInfo.states.none) {
+			createDragState([this]);
+		} else {
+
+			// get the seelcted items, but do not include selected items of selected items
+			const getDragTargets = list => {
+				let dragTargets = [];
+				list.getItems().forEach(item => {
+					if (item.selected || item === this) {
+						dragTargets.push(item);
+					} else if (item._selectionProvider) {
+						dragTargets = [...dragTargets, ...getDragTargets(item._selectionProvider)];
+					}
+				});
+				return dragTargets;
+			};
+			const dragTargets = getDragTargets(rootList);
+
+			createDragState(dragTargets);
+		}
 
 		setTimeout(() => {
 			this.dragging = true;
@@ -461,35 +602,47 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		dragState.setActiveDropTarget(this, dragState.dropLocation);
 	}
 
-	_onDropTargetBottomDrag(e) {
+	_onDropTargetBottomDragEnter(e) {
 		e.dataTransfer.dropEffect = 'move';
 		const dragState = getDragState();
 		dragState.setActiveDropTarget(this, dropLocation.below);
 		this._inBottomArea = true;
 	}
 
-	_onDropTargetDragEnter(e) {
-		e.dataTransfer.dropEffect = 'move';
-		const dragState = getDragState();
-		dragState.setActiveDropTarget(this, dropLocation.above);
-		this._inTopArea = true;
-	}
-
 	_onDropTargetLowerDragEnter(e) {
 		e.dataTransfer.dropEffect = 'move';
-		if (this._inBottomArea) {
-			const dragState = getDragState();
-			dragState.setActiveDropTarget(this, dropLocation.above);
+		if (this.dropNested) {
 			this._inBottomArea = false;
+			const dragState = getDragState();
+			dragState.setActiveDropTarget(this, moveLocations.nest);
+		} else {
+			if (this._inBottomArea) {
+				const dragState = getDragState();
+				dragState.setActiveDropTarget(this, dropLocation.above);
+				this._inBottomArea = false;
+			}
 		}
 	}
 
+	_onDropTargetTopDragEnter(e) {
+		e.dataTransfer.dropEffect = 'move';
+		const dragState = getDragState();
+		dragState.setActiveDropTarget(this, dropLocation.above);
+		this._inTopArea = true;
+	}
+
 	_onDropTargetUpperDragEnter(e) {
 		e.dataTransfer.dropEffect = 'move';
-		if (this._inTopArea) {
-			const dragState = getDragState();
-			dragState.setActiveDropTarget(this, dropLocation.below);
+		if (this.dropNested) {
 			this._inTopArea = false;
+			const dragState = getDragState();
+			dragState.setActiveDropTarget(this, moveLocations.nest);
+		} else {
+			if (this._inTopArea) {
+				const dragState = getDragState();
+				dragState.setActiveDropTarget(this, dropLocation.below);
+				this._inTopArea = false;
+			}
 		}
 	}
 
@@ -504,9 +657,14 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 
 	_onHostDragEnter(e) {
 		const dragState = getDragState();
-		if (this === dragState.dragTarget) {
-			return;
-		}
+		if (this === dragState.dragTarget) return;
+
+		// check if any of the drag targets are ancestors of the drop target
+		const invalidDropTarget = dragState.dragTargets.find(dragTarget => {
+			return isComposedAncestor(dragTarget, this);
+		});
+		if (invalidDropTarget) return;
+
 		dragState.addDropTarget(this);
 		this._draggingOver = true;
 		e.dataTransfer.dropEffect = 'move';
@@ -635,11 +793,11 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	_renderDropTarget(templateMethod) {
 		templateMethod = templateMethod || (DropTarget => DropTarget);
 		return this.draggable && this._draggingOver ? templateMethod(html`
-			<div class="d2l-list-item-drag-drop-grid" @drop="${this._onDrop}" @dragover="${this._onDragOver}">
-				<div @dragenter="${this._onDropTargetDragEnter}"></div>
+			<div class="d2l-list-item-drag-drop-grid" slot="drop-target" @drop="${this._onDrop}" @dragover="${this._onDragOver}">
+				<div @dragenter="${this._onDropTargetTopDragEnter}"></div>
 				<div @dragenter="${this._onDropTargetUpperDragEnter}"></div>
 				<div @dragenter="${this._onDropTargetLowerDragEnter}"></div>
-				<div @dragenter="${this._onDropTargetBottomDrag}"></div>
+				<div @dragenter="${this._onDropTargetBottomDragEnter}"></div>
 			</div>
 		`) : nothing;
 	}

package/components/list/list-item-drag-handle.js

@@ -1,4 +1,3 @@
-
 import '../button/button-icon.js';
 import '../icons/icon.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
@@ -6,6 +5,7 @@ import { buttonStyles } from '../button/button-styles.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
+import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 const keyCodes = Object.freeze({
 	DOWN: 40,
@@ -26,16 +26,20 @@ export const dragActions = Object.freeze({
 	down: 'down',
 	first: 'first',
 	last: 'last',
+	nest: 'nest',
 	nextElement: 'next-element',
 	previousElement: 'previous-element',
+	rootFirst: 'rootFirst',
+	rootLast: 'rootLast',
 	save: 'keyboard-deactivate-save',
+	unnest: 'unnest',
 	up: 'up'
 });
 
 /**
  * @fires d2l-list-item-drag-handle-action - Dispatched when an action performed on the drag handle
  */
-class ListItemDragHandle extends LocalizeCoreElement(LitElement) {
+class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -176,11 +180,11 @@ class ListItemDragHandle extends LocalizeCoreElement(LitElement) {
 				break;
 			case keyCodes.HOME:
 				this._movingElement = true;
-				action = dragActions.first;
+				action = (e.ctrlKey ? dragActions.rootFirst : dragActions.first);
 				break;
 			case keyCodes.END:
 				this._movingElement = true;
-				action = dragActions.last;
+				action = (e.ctrlKey ? dragActions.rootLast : dragActions.last);
 				break;
 			case keyCodes.TAB:
 				action = e.shiftKey ? dragActions.previousElement : dragActions.nextElement;
@@ -189,9 +193,16 @@ class ListItemDragHandle extends LocalizeCoreElement(LitElement) {
 				action = dragActions.cancel;
 				this.updateComplete.then(() => this._keyboardActive = false);
 				break;
+			case keyCodes.RIGHT:
+				this._movingElement = true;
+				action = (this.dir === 'rtl' ? dragActions.unnest : dragActions.nest);
+				break;
+			case keyCodes.LEFT:
+				this._movingElement = true;
+				action = (this.dir === 'rtl' ? dragActions.nest : dragActions.unnest) ;
+				break;
 			case keyCodes.ENTER:
 			case keyCodes.SPACE:
-			case keyCodes.RIGHT:
 				action = dragActions.save;
 				this.updateComplete.then(() => this._keyboardActive = false);
 				break;
@@ -221,7 +232,7 @@ class ListItemDragHandle extends LocalizeCoreElement(LitElement) {
 	}
 
 	_onInactiveKeyboard(e) {
-		if (e.type === 'click' || e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE || e.keyCode === keyCodes.LEFT) {
+		if (e.type === 'click' || e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
 			this._dispatchAction(dragActions.active);
 			this._keyboardActive = true;
 			e.preventDefault();
@@ -229,7 +240,7 @@ class ListItemDragHandle extends LocalizeCoreElement(LitElement) {
 	}
 
 	_onInactiveKeyDown(e) {
-		if (e.type === 'click' || e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE || e.keyCode === keyCodes.LEFT) {
+		if (e.type === 'click' || e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
 			e.preventDefault();
 		}
 	}

package/components/list/list-item-generic-layout.js

@@ -67,6 +67,17 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column: content-start / end;
 				grid-row: nested-start / nested-end;
 			}
+			:host(.d2l-dragging-over) ::slotted([slot="nested"]) {
+				z-index: 6;
+			}
+
+			::slotted([slot="drop-target"]) {
+				height: 100%;
+				position: absolute;
+				top: 0;
+				width: 100%;
+				z-index: 5;
+			}
 
 			::slotted([slot="outside-control"]),
 			::slotted([slot="control"]),
@@ -115,7 +126,6 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column: content-start / end;
 				z-index: 3;
 			}
-
 		`;
 	}
 
@@ -148,6 +158,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 	render() {
 		return html`
+			<slot name="drop-target"></slot>
 			<slot name="content-action" class="d2l-cell" data-cell-num="5"></slot>
 			<slot name="outside-control-action" class="d2l-cell" data-cell-num="1"></slot>
 			<slot name="outside-control" class="d2l-cell" data-cell-num="2"></slot>

package/components/list/list-item-mixin.js

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 import './list-item-generic-layout.js';
 import './list-item-placement-marker.js';
 import { css, html } from 'lit-element/lit-element.js';
+import { findComposedAncestor, getComposedParent } from '../../helpers/dom.js';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
@@ -301,6 +302,52 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		});
 	}
 
+	_getNestedList() {
+		const nestedSlot = this.shadowRoot.querySelector('slot[name="nested"]');
+		let nestedNodes = nestedSlot.assignedNodes();
+		if (nestedNodes.length === 0) {
+			nestedNodes = [...nestedSlot.childNodes];
+		}
+
+		return nestedNodes.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-LIST'));
+	}
+
+	_getNextListItemSibling() {
+		let nextElement = this.nextElementSibling;
+		while (nextElement) {
+			if (this._isListItem(nextElement)) return nextElement;
+			nextElement = nextElement.nextElementSibling;
+		}
+	}
+
+	_getParentListItem() {
+		const parentListItem = findComposedAncestor(this.parentNode, node => this._isListItem(node));
+		return parentListItem;
+	}
+
+	_getPreviousListItemSibling() {
+		let previousElement = this.previousElementSibling;
+		while (previousElement) {
+			if (this._isListItem(previousElement)) return previousElement;
+			previousElement = previousElement.previousElementSibling;
+		}
+	}
+
+	_getRootList(node) {
+		if (!node) node = this;
+		let rootList;
+		while (node) {
+			if (node.tagName === 'D2L-LIST') rootList = node;
+			node = getComposedParent(node);
+		}
+		return rootList;
+	}
+
+	_isListItem(node) {
+		if (!node) node = this;
+		return node.role === 'rowgroup' || node.role === 'listitem';
+	}
+
 	_onFocusIn() {
 		this._focusing = true;
 	}
@@ -341,18 +388,18 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 			'd2l-list-item-content-extend-separators': this._extendSeparators,
 			'd2l-focusing': this._focusing,
 			'd2l-hovering': this._hovering,
+			'd2l-dragging-over': this._draggingOver
 		};
 		const contentClasses = {
 			'd2l-list-item-content': true,
 			'd2l-hovering': this._hoveringPrimaryAction,
-			'd2l-focusing': this._focusingPrimaryAction,
+			'd2l-focusing': this._focusingPrimaryAction
 		};
 
 		const primaryAction = this._renderPrimaryAction ? this._renderPrimaryAction(this._contentId) : null;
 
 		return html`
 			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
-			${this._renderDropTarget()}
 			<div class="d2l-list-item-drag-image">
 				<d2l-list-item-generic-layout
 					@focusin="${this._onFocusIn}"
@@ -361,6 +408,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 					data-breakpoint="${this._breakpoint}"
 					data-separators="${ifDefined(this._separators)}"
 					?grid-active="${this.role === 'rowgroup'}">
+					${this._renderDropTarget()}
 					${this._renderDragHandle(this._renderOutsideControl)}
 					${this._renderDragTarget(this._renderOutsideControlAction)}
 					${this.selectable ? html`
@@ -391,7 +439,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 						<slot name="actions" class="d2l-list-item-actions">${actions}</slot>
 					</div>
 					<div slot="nested" @d2l-selection-provider-connected="${this._onSelectionProviderConnected}">
-						<slot name="nested">${nested}</slot>
+						<slot name="nested" @slotchange="${this._onNestedSlotChange}">${nested}</slot>
 					</div>
 				</d2l-list-item-generic-layout>
 				<div class="d2l-list-item-active-border"></div>