I'm learning the D&D kit. When I include the {...listeners}
attribute, all the buttons on my card stop working.
My card
<div className={classes.card} ref={setNodeRef} style={style} {...attributes} {...listeners}>
<h2>{title}</h2>
<img className={classes.remove} onClick={removeCard} src={remove} alt={remove}/>
{tasks.map((item)=>
<Task
key={item.id}
color={item.color}
title={item.name}
validDate={item.date}
link={item.link}
onRemove={()=>removeTask(item)}
/>)}
<img className={classes.plus} src={plus} alt={'plus'} onClick={openTaskForm}/>
</div>
Context
<DndContext
collisionDetection={closestCenter}
onDragEnd={handleDragEnd} >
<div className={classes.cardBlock}>
<SortableContext
items={_cardItemState}
strategy={horizontalListSortingStrategy}
>
{cards.map((item) =>
<Card key={item.id} id={item.id} card={item} taskKey={item.id} title={item.text}
tasks={item.tasks ? item.tasks : []}/>
)}
</SortableContext>
</div>
</DndContext>
I tried to change the position of the DND context but it didn't work.