Doubts - can I change thumb before was generated?

[heltonalves99]

Hi guys, how are you ?

I'm trying pass more information in thumb generated by drag, is there any way to do this?

he is a print showing example how Pivotal Traacker works:

[ObaidUrRehman]

@heltonalves99 I am afraid this is not possible with this component.

[pzero24]

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).