Hello - does anyone have any suggestions to remove this default drag mouse cursor in UXP? I’ve been testing the drag and drop functionality for a Photoshop plugin and have found that in the Windows 10 (PS 25.9.0 and PS 24.7.4) implementation the default drag presentation is to show a small white rectangle with the word
‘-> Move’
next to the mouse cursor and a larger semi-opaque square placeholder that presumably is suppose to display some sort of image in it. A low quality photo of the drag icon i am seeing over a simple table is shown below… (I call this the square-and-label or SAL for convenience)
(note* - this SAL overlay issue is NOT happening on my Macbook with PS 24.7.4)
I have tried the standard solution of setting the drag image to a small transparent gif but this does not remove the square-and-label
var gBlankimg = new Image();
gBlankimg.src = ‘transparent.gif’;
event.dataTransfer.setDragImage(gBlankimg, 1, 1);
the code behind the screenshot is…
code for UXP drag and drop ghost image
> <div id="sortable-list">
> <div class="sortable-item" draggable="true" style="background-color: #7833b9;">Item 1</div>
> <div class="sortable-item" draggable="true" style="background-color: #619626;">Item 2</div>
> <div class="sortable-item" draggable="true" style="background-color: #c52e35;">Item 3</div>
> <div class="sortable-item" draggable="true" style="background-color: #dfc263;">Item 4</div>
> <div class="sortable-item" draggable="true" style="background-color: #223b33;">Item 5</div>
> <div class="sortable-item" draggable="true" style="background-color: #ac786b;">Item 6</div>
>
> </div>
>
>
> function initialise()
> {
>
> // Usage example
> sortable(document.getElementById('sortable-list'), () => {
> console.log('List changed');
> }, () => {
> console.log('Drag ended');
> });
> }
>
>
> var gBlankimg = document.createElement('img');//new Image();
> gBlankimg.src = 'transparent.gif';//'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
>
> function sortable(rootEl, onSortChangeCallback, onUpdate)
> {
> let dragEl = null;
> const items = rootEl.querySelectorAll('.sortable-item');
>
> items.forEach(item => {
> item.addEventListener('dragstart', (evt) => {
> dragEl = item;
> item.classList.add('dragging');
> evt.dataTransfer.effectAllowed = 'move';
> evt.dataTransfer.setDragImage(gBlankimg, 1, 1);
> });
>
> item.addEventListener('dragend', () => {
> item.classList.remove('dragging');
> dragEl = null;
> if (onUpdate) onUpdate();
> });
> });
>
> rootEl.addEventListener('dragover', (evt) => {
> evt.preventDefault();
> evt.dataTransfer.dropEffect = 'move';
> evt.dataTransfer.setDragImage(gBlankimg, 1, 1);
>
> const afterElement = getDragAfterElement(rootEl, evt.clientY);
> if (afterElement == null) {
> rootEl.appendChild(dragEl);
> } else {
> rootEl.insertBefore(dragEl, afterElement);
> }
>
> if (onSortChangeCallback) onSortChangeCallback();
> });
>
> // Helper function to get element's vertical center
> const getElementVerticalCenter = (el) => {
> const rect = el.getBoundingClientRect();
> return rect.top + (rect.height / 2);
> };
>
> function getDragAfterElement(container, y)
> {
> const draggableElements = [...container.querySelectorAll('.sortable-item:not(.dragging)')];
>
> return draggableElements.reduce((closest, child) => {
> const box = child.getBoundingClientRect();
> const offset = y - box.top - box.height / 2;
> if (offset < 0 && offset > closest.offset) {
> return { offset: offset, element: child };
> } else {
> return closest;
> }
> }, { offset: Number.NEGATIVE_INFINITY }).element;
> }
> }