<LabelCard
identifier={identifier}
type={LabelType.Default}
defaultPosition={defaultPosition}
$expandedOffset={expandedOffset}
locked={locked}
selectedToolTypeProp={selectedToolType}
isExpanded={isExpanded}
originalPosRef={originalPosRef}
cardRef={cardRef}
>
<Content ref={cardRef}>
<Title selected={isSelected}>{title}</Title>
{!isMobile && <SubTitle selected={isSelected}>({subtitle})</SubTitle>}
{isMobile && isExpandable && (
<InfoButton onClick={onExpand}>
<Icon name={Icons.Info} selected={isExpanded} />
</InfoButton>
)}
{description.length > 0 && (
<DescriptionContent
ref={descriptionRef}
expanded={isExpanded}
expandedHeight={expandedHeight}
>
<Description>{description}</Description>
</DescriptionContent>
)}
</Content>
</LabelCard>
This is my component where I render LabelCard
inside which I have a hook responsible for dragging.
Inside this hook I have this mouseDown
function:
function mouseDown(e: { clientX: number; clientY: number }) {
if (!card) {
return;
}
startX = e.clientX;
startY = e.clientY;
initialX = card.offsetLeft;
initialY = card.offsetTop;
document.addEventListener('mousemove', mouseMove);
document.addEventListener('mouseup', mouseUp);
}
I tried to check:
if (cardRef?.current && cardRef.current.contains(e.target as Node)) {
return;
}
This prevents dragging even when I click on some blank space. This blank space is typically part of the text itself like white space so maybe that’s why I can not drag the label altogether even when I am not clicking on text.
Is there any solution to prevent dragging when I am selecting the text while also being able to drag when I click on the blank space? (I also tried to check if click was on TEXT NODE, but it seems as it is not able to differentiate between text and space).