2

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.

JSON Derulo
  • 9,780
  • 7
  • 39
  • 56
SurikeN
  • 21
  • 2

0 Answers0