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.