your personal website on atproto - mirror blento.app

safari drag and drop fix

+10 -15
+10 -15
src/lib/website/EditableWebsite.svelte
··· 809 }} 810 ondragend={async (e) => { 811 e.preventDefault(); 812 - const cell = getDragXY(e); 813 - if (!cell) return; 814 - 815 - if (activeDragElement.item) { 816 - if (isMobile) { 817 - activeDragElement.item.mobileX = cell.x; 818 - activeDragElement.item.mobileY = cell.y; 819 - } else { 820 - activeDragElement.item.x = cell.x; 821 - activeDragElement.item.y = cell.y; 822 - } 823 - 824 - // Fix collisions and compact items after drag ends 825 - fixCollisions(items, activeDragElement.item, isMobile); 826 - } 827 activeDragElement.x = -1; 828 activeDragElement.y = -1; 829 activeDragElement.element = null; ··· 863 activeDragElement.w = item.w; 864 activeDragElement.h = item.h; 865 activeDragElement.item = item; 866 867 // Store original positions of all items 868 activeDragElement.originalPositions = new Map();
··· 809 }} 810 ondragend={async (e) => { 811 e.preventDefault(); 812 + // safari fix 813 activeDragElement.x = -1; 814 activeDragElement.y = -1; 815 activeDragElement.element = null; ··· 849 activeDragElement.w = item.w; 850 activeDragElement.h = item.h; 851 activeDragElement.item = item; 852 + // fix for div shadow during drag and drop 853 + const transparent = document.createElement('div'); 854 + transparent.style.position = 'fixed'; 855 + transparent.style.top = '-1000px'; 856 + transparent.style.width = '1px'; 857 + transparent.style.height = '1px'; 858 + document.body.appendChild(transparent); 859 + e.dataTransfer?.setDragImage(transparent, 0, 0); 860 + requestAnimationFrame(() => transparent.remove()); 861 862 // Store original positions of all items 863 activeDragElement.originalPositions = new Map();