Generic Drag and Drop

Drag and Drop is supported for any HTML element by using the smart-droppable and smart-drag-drop-target directives.

The smart-droppable directive should be applied to a wrapper element that contains the actual draggable one. The draggable element should have an identifiable attribute applied that can then be specified as a CSS selector for the smart-drag-drop-target directive. This allows the drop target, an element that accepts dropped elements to filter which elements it will accept.

<div smart-drag-drop-target="[drag-test]" (onDropped)="itemDropped($event)" [smart-receiving-cursor]="getCursor"> <ul> <li *ngFor="let item of items"> {{item | json}} </li> </ul> </div> <div smart-droppable (onDropped)="droppableDropped($event)" [droppableData]="{ value: 'test' }"> <p drag-test style="cursor: move">draggable</p> </div>
items: any[] = []; itemDropped(ev: SmartDragDropEvent) { console.log(ev); this.items.push(ev.data); } getCursor(ev: SmartDragDropEvent) { return 'pointer'; } droppableDropped(ev: SmartDragDropEvent) { console.log(ev); }

In the above example, we are defining a “drop zone” for elements that match the CSS selector “[drag-test]”. When the “p[drag-test]” element is dragged and dropped on the “drop zone”, the onDropped event is raised. We then handle that event using the itemDropped event handler.

We are also providing a value for the droppable element’s droppableData attribute. This optional attribute allows us to pass data to the receiving “drop zone” through the event arguments.

We also provide a value for the drop target’s smart-receiving-cursor attribute. This optional attribute takes a function and calls it when an element that matches the provided CSS selector is dragged on top of the drop target. The function should return a string that represents a valid value for the “cursor” CSS property. If no value is returned or no value is provided for the attribute, the cursor defaults to “default”. Alternatively, a string may also be provided instead of a function.