diff --git a/src/Components/Components/Components.tsx b/src/Components/Components/Components.tsx index 8b519c5..f7bd816 100644 --- a/src/Components/Components/Components.tsx +++ b/src/Components/Components/Components.tsx @@ -19,7 +19,9 @@ interface IComponentsProps { } function HandleDragStart(event: React.DragEvent): void { - event.dataTransfer.setData('type', (event.target as HTMLButtonElement).id); + const element = event.target as HTMLButtonElement; + event.dataTransfer.setData('type', element.id); + event.dataTransfer.setDragImage(element, 0, 0); } interface SidebarCategory { diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx index fdae986..369d6b0 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx @@ -34,6 +34,7 @@ function RemoveBorderClasses(target: HTMLButtonElement, exception: string = ''): function HandleDragLeave(event: React.DragEvent): void { const target: HTMLButtonElement = event.target as HTMLButtonElement; + RemoveBorderClasses(target); } @@ -43,6 +44,7 @@ function HandleDragOver( ): void { event.preventDefault(); const target: HTMLButtonElement = event.target as HTMLButtonElement; + const rect = target.getBoundingClientRect(); const y = event.clientY - rect.top; // y position within the element. @@ -193,7 +195,7 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element { @@ -228,7 +230,7 @@ function ElementsListRow( } const buttonSelectedClass: string = isSelected - ? 'bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 hover:shadow-blue-500 text-slate-50' + ? 'bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 border-blue-600 hover:shadow-blue-500 text-slate-50' : 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400'; return