Doubts - can I change thumb before was generated?
heltonalves99 opened this issue · comments
@heltonalves99 I am afraid this is not possible with this component.
Yes, you can. I am doing it in one of my projects. The secret is to create an element in Javascript, and then use setDragImage() to set it to that element. Here is an example of how this works:
dragStarted(event: DragEvent, item?: Property[]) {
let wrapper = document.createElement('div');
wrapper.className = 'drag-transit-wrapper pb-2 pr-2';
let dragTransitImage = document.createElement('div');
dragTransitImage.className = 'drag-transit-image p-2';
let propertyFileElement = document.createElement('span');
propertyFileElement.className = 'float-left fa fa-file p-1 pr-3';
dragTransitImage.appendChild(propertyFileElement);
let propertyCountElement = document.createElement('span');
propertyCountElement.className = 'property-title ml-2 monospaced';
if (item !== undefined) {
propertyCountElement.innerHTML = item.length + ' properties';
}
dragTransitImage.appendChild(propertyCountElement);
wrapper.appendChild(dragTransitImage);
document.body.appendChild(wrapper);
event.dataTransfer.setDragImage(wrapper, 0, 0);
}
dragEnded() {
let elements = document.querySelectorAll('.drag-transit-wrapper');
for (let index = 0; index < elements.length; index++) {
document.body.removeChild(elements[index]);
}
}
Note that the native drag and drop API automatically adds a transparency gradient for elements of a certain size (around 300px on X or Y axes).