Stack Overflow
Stack Overflow

Questions tagged [dnd-kit]

46 questions
0
votes
0 answers

React dnd kit sortable not able to sort items in canvas

I have a list of items that I am dropping into a canvas. But the items once they are added to canvas are not sorting. Here is my code. I am new to the dnd-kit, can someone help. Here is my sandbox…
Philomath
  • 1,145
  • 4
  • 18
  • 28
0
votes
0 answers

React dnd kit drag drop issue

I am new to drag and drop in react and I am trying a simple example to move items from a list to a canvas. I am using dnd-kit, material UI and type script. Here is my code App.tsx import { ItemProp } from "./types"; import MainScreen from…
Philomath
  • 1,145
  • 4
  • 18
  • 28
0
votes
1 answer

How can I calculate draggable position independently from a scrollable droppable area in React using dnd-kit?

I created a touch-screen application using React. I am using the dnd-kit library to enable the dragging & dropping of certain divs. I have a calendar where the days are the columns, and the rows are categories. Each cell is a Droppable area.…
dgergely
  • 23
  • 4
0
votes
0 answers

DND-KIT unable to make rows of table draggable and droppable

Trying to implement dnd-kit functionality for every row inside a table that is rendered inside of a modal. I am trying to make the row that is created with map() method draggable and droppable inside the table. I have also created two simple…
Luka Jovicic
  • 1
  • 2
0
votes
0 answers

I am trying to deploy my next.js project, but I keep getting the following error with everything I do:

i tried to deleted node_modules folder and run npm install --legacy-peer-deps but it not helped for me can anyone help? Build Failed Command "npm install" exited with 1 npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR!…
Shußham
  • 1
  • 1
0
votes
0 answers

laravel-react (inertia/vita) - import react dnd-kit

I've setup a very fresh and unmodified page with laravel/breeze starter kit. Laravel using vite plugin, inertia and react. Everything got setup by laravel:breeze starter kit. Now for my frontend I need to work with the react dnd-kit but im…
thedoomer1000
  • 73
  • 6
0
votes
0 answers

Why dnd-kit items move after double clicking?(two-layer modal)

I am trying to create a multiple containers drag and drop function in a second layer modal. The result is quite weird. I can move the items to other containers, but I have to double click the same item to make it move. I don't know where I'm going…
Jenny Huoh
  • 13
  • 4
0
votes
1 answer

the isDragging variable is not being updated correctly and hence the border color is not changing{Using dnd-kit}

The result should be that once I drag the element it should change the border color to pink. I tried putting this but then it just makes the border pink on reload without dragging: item: { id: id }, import React from 'react'; import { useDraggable }…
Siddhaant Pahuja
  • 1
0
votes
0 answers

DnD-kit activating dragging when adding element to list

I have list with draggable elements. When I'm adding elements to list Dragging is turned on for 1 sec. Looks like on the first render o element it turns on. It is important because when isDragging is true hover of element is turn on. So it is like…
Werthis
  • 557
  • 3
  • 15
0
votes
2 answers

Need help creating Drag and Drop Material UI Tabs

I've got a simple setup for some MUI tabs that I'm working to implement some drag and drop functionality to. The issue I'm running into is that when the SortableContext is nested inside of the TabList component, drag and drop works but the values no…
Nate
  • 21
  • 3
0
votes
0 answers

Mui Tab Drag/Drop focus tab is not focused (i.e. colored)

I managed to make the React MUI Basic Tab component work with dnd-kit. However, to switch tabs I had to 'brute force' it programmatically and use setFocus for the component. I also had to do the same thing for the styling. I was wondering…
importTurtle
  • 138
  • 1
  • 9
0
votes
0 answers

MUI System - Styled component

I have created MyComponent( called 'InnerContainer' ) by using MUI system; styled-component. But onClick under the styled component is not working. It is working outside 'InnerContainer' but not working inside 'InnerContainer'. Don't know the…
Yun
  • 1
0
votes
1 answer

iframe of TinyMCE editor is removed from DOM after moving the editor

I have a sortable collection of TinyMce editors and when an editor is moved, this one doesn't work anymore. The TinyMCE editor iframe turn empty after drag end event but I don't understand why. The editor toolbar is here but doesn't work and the…
Jayss230
  • 13
  • 5
0
votes
2 answers

error in the use of useSortable with dnd-kit

I don't know why it gives me an error, the useSortable import React, { useState } from "react"; import "./Home.css"; import Cards from "../../components/cards/Cards"; import { Container } from "./HomeStyles"; import { DndContext, …
Jacobo Arcila
  • 1
0
votes
1 answer

Updating state adds new objects instead of updating existing objects

I am having a problem with trying to update my state. I am trying to update the items inside my existing objects whenever I drop the element however whenever I update it, it adds a new object to my array instead of updating them. What am I doing…
Jeremy Love
  • 169
  • 2
  • 12
1 2
3