Pinning a particular element using a drag and drop library in React

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• react-router-dom v6 params only numbers

  I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:

   <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
  

  but it not work in v6.
• How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

  My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

  This my .env file

  REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
  REACT_APP_authDomain=XXXXX.firebaseapp.com
  REACT_APP_projectId=XXXX
  REACT_APP_storageBucket=XXXXX.appspot.com
  REACT_APP_messagingSenderId=4997390XXXXX
  REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
  REACT_APP_measurementId=G-M1XDXXXXXX
  

  This my firebase config file

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
    measurementId: process.env.REACT_APP_measurementId,
  };
  
  when I debugging firebaseConfig object
  
  console.log(firebaseConfig.apiKey);  ==========> undefined 
  console.log(firebaseConfig.authDomain);  ==========> undefined 
  console.log(firebaseConfig.projectId);  ==========> undefined 
  console.log(firebaseConfig.storageBucket); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  console.log(firebaseConfig.appId); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  
  

  client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
• Javascript - Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

  I have this code in my vue component

  <template>
    <div class="container-fluid p-0">
      <div class="row m-0">
        <div class="col-12 vh-100 p-0" @drop="drop($event)" @dragover.prevent id="camView">
          <canvas class="position-absolute top-0 end-0" ref="targetImg" id="targetImg"></canvas>
          <div class="position-absolute" id="selection" draggable="true" @dragstart="drag($event)"></div>
          <img src="@/assets/lu.jpeg" class="img-fluid" id="srcImg" ref="srcImg">
        </div>
      </div>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'DropView',
    data() {
      return {
  
      }
    },
    mounted() {
   
    },
    methods: {
      drag(e) {
        console.log(e)
        e.dataTransfer.setData('text', e.target.id);
      },
      drop(e) {
        console.log(e)
        e.preventDefault();
        let data = e.dataTransfer.getData('text');
        console.log(data)
        let box = document.getElementById(data)
        console.log(box)
        e.target.appendChild(box);
      }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
  .col-12 {
    #selection {
      width: 360px;
      height: 240px;
      border-style: dashed;
      border-width: 1px;
      border-color: white;
      background-color: transparent;
      z-index: 1;
    }
    #target-img {
      overflow: hidden;
      width: 320px;
      height: 240px;
      z-index: 1;
    }
    #srcImg {
      height: 100%;
      display: block;
      width: 100%;
      object-fit: cover;
    }
  }
  </style>
  

  I'm trying to use drag and drop to moove a div that is positioned on top of an image. I'm able to start the drag operation but when I release the div into another position I will get this error in console

  Vue warn]: Unhandled error during execution of native event handler 
  Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
  

  I've noticed that the div will disappear and is not mooved. Is there any fix?
• Xamarin Drag and drop how to edit balloon icon and text see image

  Using the drag drop sample https://github.com/xamarin/xamarin-forms-samples/tree/main/WorkingWithGestures/DragAndDropGesture I'm not sure its actually a notify balloon not sure of its correct terminology making it hard to search. In the image you can see when drop location is active it displays in the ballon the copy icon and copy as text. I want to change the icon and the text but not sure how. I have tried the following code but it doesn't do anything.

  private void OnCorrectDragOver(object sender, DragEventArgs e)
      {
          e.Data.Text = "My text data goes here";
          e.Data.Image = "plusicon.png";
      }
  

  
• React Card Example issue - Card is replaced instead of being appended to a list of cards in another column

  I have been persistently working on this problem where the goal is to drag a card form 'Column 1' and copy that into another column say 'Column 2'. Now when my first card is dragged and drop it into 'Column 2, the card is accordingly added to that column, but when I drag another card and drop into 'Column 2' instead of being appended it just replaces the existing card with itself. I have been debugging the state, but the issue still persists. I haven't gotten a clue what am I doing wrong here?

  Here's my code

  // Card Component
  function Card({ id, text, isDrag }) {
    const [, drag] = useDrag(() => ({
      type: "bp-card",
      item: () => {
        return { id,  text}
      },
      collect: monitor => ({
        isDragging: !!monitor.isDragging(),
      }),
      canDrag: () => isDrag
    }));
  
    return (
      <div
        className='card'
        ref={drag}
        style={{
          cursor: isDrag ? 'pointer' : 'no-drop'
        }}
      >
        {text}
      </div>
    )
  }
  
  // Column Component
  function Column({ title, children, onCardDropped }) {
    const [, drop] = useDrop(() => ({
      accept: "bp-card",
      drop: item => {
        onCardDropped(item);
      }
    }));
  
    return (
      <div className="flex-item" ref={title === 'Column 2' ? drop : null}>
        <p>{title}</p>
  
        {children.length > 0 && children.map(({ id, text, isDrag }) => (
          <Card
            key={id}
            id={id}
            text={text}
            isDrag={isDrag}
          />
        ))}
      </div>
    )
  }
  
  // Main App
  function App() {
    const [cards] = useState([
      { id: 1, text: 'Card 1', isDrag: true },
      { id: 2, text: 'Card 2', isDrag: true },
    ]);
  
    const [columns, setColumns] = useState([
      {
        id: 1,
        title: 'Column 1',
        children: cards
      },
      {
        id: 2,
        title: 'Column 2',
        children: []
      },
    ]);
  
    const onCardDropped = ({ id, text }) => {
      // let card = null;
      const targetColumnId = 2;
  
      const transformedColumns = columns.map(column => {
        if (column.id === targetColumnId) {
          return {
            ...column,
            children: [
              ...column.children,
              { id, text }
            ]
          }
        }
        return column;
      });
  
      setColumns(transformedColumns);
    }
  
    return (
      <DndProvider backend={HTML5Backend}>
        <div className='flex-container'>
          {columns.map((column) => (
            <Column
              key={column.id}
              title={column.title}
              children={column.children}
              onCardDropped={onCardDropped}
            />
          ))}
        </div>
      </DndProvider>
    );
  }
  

  Any help is highly appreciated. Thanks.
• What is BackendFactory in context of react dnd?

  I am trying to implement the react-chessboard component. I want a page that contains an empty chessboard and the pieces are kept outside for the user to drag and drop them into the board. By default the board is set to the starting position. In the react-chessboard documentation, I came across a prop called 'customDndBackend' which takes a value of type BackendFactory. I could not find it anywhere so I asked it here. Any help would be appreciated. react-chessboard-npm page

  <Chessboard
                  className={classes.board}
                  boardWidth={
                      window.screen.width < 600 ? 0.9 * window.screen.width : 560
                  }
                  arePiecesDraggable={true}
                  // position={'start'}
                  animationDuration={200}
                  customBoardStyle={{
                      borderRadius: '4px',
                      boxShadow: '0 5px 15px rgba(0, 0, 0, 0.5)',
                  }}
                  customDarkSquareStyle={{ backgroundColor: '#A1B57D' }}
                  customLightSquareStyle={{ backgroundColor: '#F7F7EE' }}
                  customPieces={customPieces()}
                  ref={chessboardRef}
              />
• 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 wrong?

  const handleDragEnd = (event) => {
      const { active, over } = event;
      const activeContainer = event.active.data.current.sortable.containerId;
      const overContainer = event.over.data.current.sortable.containerId;
  
      if (active.id !== over.id) {
        const oldIndex = columns[activeContainer].items.findIndex(
          ({ id }) => id === active.id
        );
        const newIndex = columns[overContainer].items.findIndex(
          ({ id }) => id === over.id
        );
        const result = arrayMove(
          columns[overContainer].items,
          oldIndex,
          newIndex
        );
  
        console.log("oldindex", columns[activeContainer].items);
        console.log("newindex", result);
        if (activeContainer !== overContainer) {
        }
        setColumns((columns) => ({
          ...columns,
          [newIndex]: {
            ...columns[newIndex],
            items: result
          }
        }));
  
        console.log("set colmns", columns);
  
        // setColumns((items) => {
        //   console.log('items', items)
        //   const oldIndex = items[activeContainer].items.findIndex(({id}) => id === active.id);
        //   const newIndex = items[overContainer].items.findIndex(({id}) => id === over.id);
  
        //   console.log('colnew', columns)
        //   console.log('oldindex', oldIndex)
        //   console.log('newindex', newIndex)
        //   return arrayMove(items[overContainer], oldIndex, newIndex);
        // });
      }
    };
  

  

  
• Scrolling disabled when using bootstrap + drag and drop

  I'm having a problem that I can't get rid of when using drag and drop (library: dnd-kit) together with bootstrap.

  When I'm adding bootstrap into the project the window isn't scrolling anymore as soon as I start dragging an element up or down. Here is a sandbox illustrating the problem: https://codesandbox.io/s/dnd-kit-bootstrap-scrolling-bug-u3jg2?file=/src/index.js Comment out the bootstrap import in the index.js file in line 3 to see the difference.

  Do you have any idea how I can solve this? Thanks a lot for your help!
• Dnd-kit: active item loses order when dragged on Droppable

  I'm facing a problem using @dnd-kit. The soring part works well (for example when I start dragging 1st element it obvioeulsy does sort), but when I reach a droppable element (green Thrash), the sorting breaks and the 1st element goes back.

  You can see live demo here: link

  Is there any way to fix this?
• react hook form not rearranging onSubmit data when input fields changed order

  I'm trying to implement react-hook-form with react-sortablejs, but when I rearrange the input field order the order of the submitted data is not updated.

  I'm using Next.js with Chakra.ui.

  Some help would be highly appreciated.

  https://codesandbox.io/s/goofy-danilo-2qcfs2?file=/pages/index.tsx
• sortablejs not working within SharePoint (webpart)

  I have an application where items can be dragged and dropped between two lists. For this I use react-sortablejs (which uses sortablejs).

  When I start my React application normally (in dev mode or deployed standalone) the drag and drop works as desired.

  However, as soon as I embed the application in a SharePoint page (using webpart), the drag and drop feature starts to go haywire: the first drop works as desired, but all subsequent drops of the same item result in strange behavior, primarily duplication of the item.

  After some debugging, it looks to me like the item remains in the old list and therefore an error occurs when the item is "pushed back" or a duplicate occurs because another item is pushed into the same list.

  I therefore don't think that this is a problem of the library itself (also because I haven't found any similar error messages about this), but that it has something to do with SharePoint. I noticed in another context that classic context menus with absolute positioning also cause problems because event.pageX and event.pageY contain different values.

  Anyway, at the moment I have no clue to get to the bottom of this problem, so I'm hoping that anyone might have had similar experiences before. Maybe this ticket will help someone else who runs into similar problems in the future.