Question

Technologies:

javascript

reactjs

Tolerim

a month ago

How can I display a list item within an image and present it in a text box located in the corresponding section of the image?

I have an image and a list adjacent to each other on a page. I want the user to be able to drag a list item and drop it into a specific area of the image. After dropping the item, I want to display its content in a text box input. Is there any way to achieve this? Please find my current code below:

<div id='galleyDesign' style={{position:'relative',marginTop:'50px',marginBottom: '200px'}}>
    {showGalleyF1 && (
        <div>
        <img className="floatLeft" src={galley}  alt='' width="50%" height="50%"/>
        <div className='nav-menu-items sm-scrollbar'>
            <ul className='nav-menu-components-box' style={{width: "400px",marginLeft:"60px"}}>
                {componentData.map((_,index) => {
                    if(_.selected){
                        return (
                            <div draggable style={{cursor:'pointer'}}>
                                <li className='nav-menu-components active-text'>
                                    <span id={"important-span"+_.id} className='nav-menu-components-title floatLeft mt-2'>
                                        <img className="icon" alt='widgets' src={rubic} />
                                        &nbsp;<b>{.rollNo}</b> - &nbsp;{.name}</span>
                                    <div className='drag-reorder-widgets'>
                                    </div>
                                </li>
                            </div>
                        );
                    }
                    return null;
                })}
            </ul>
        </div>
        </div>
    )}
</div>

Answers(2)

Tolerim

a month ago

To achieve this functionality, you can utilize native HTML5 drag and drop API. You will need to: 1. Add "onDragStart" event to the list items that you want to drag. 2. In the "onDragStart" event, specify the data to be transferred. You can create a dataTransfer object and set its "data" property. 3. Add "onDrop" event to the area where you want to drop the item. In the "onDrop" event, get the data that was transferred and create a new list item with it. 4. Update the state to remove the dropped item from the initial list. Here's an example implementation using the code you provided:

const [componentData, setComponentData] = useState([...]); // your initial component data state

const handleDragStart = (event, id) => {
  event.dataTransfer.setData("text/plain", id);
};

const handleDrop = (event) => {
  event.preventDefault();
  const id = event.dataTransfer.getData("text/plain");
  const updatedData = componentData.filter((item) => item.id !== id);
  // create a new list item with the dropped data
  const droppedItem = document.createElement("li");
  droppedItem.innerText = `Dropped item: ${id}`;
  // add the new list item to the text box input
  const textBoxInput = document.getElementById("text-box-input");
  textBoxInput.appendChild(droppedItem);
  // update state to remove the dropped item from the initial list
  setComponentData(updatedData);
};

return (
  <div style={{ position: "relative", marginTop: "50px", marginBottom: "200px" }} id="galleyDesign">
    {showGalleyF1 && (
      <div>
        <img className="floatLeft" src={galley} alt="" width="50%" height="50%" />
        <div className="nav-menu-items sm-scrollbar">
          <ul className="nav-menu-components-box" style={{ width: "400px", marginLeft: "60px" }}>
            {componentData.map((_, index) => {
              if (_.selected) {
                return (
                  <div draggable onDragStart={(event) => handleDragStart(event, _.id)}>
                    <li className="nav-menu-components active-text">
                      <span id={"important-span" + _.id} className="nav-menu-components-title floatLeft mt-2">
                        <img className="icon" alt="widgets" src={rubic} />
                        &nbsp;<b>{_.rollNo}</b> - &nbsp;{_.name}
                      </span>
                      <div className="drag-reorder-widgets"></div>
                    </li>
                  </div>
                );
              }
              return null;
            })}
          </ul>
        </div>
      </div>
    )}
    <div onDrop={handleDrop} onDragOver={(event) => event.preventDefault()}>
      {/* this is the area where you want to drop the item */}
      {/* add a text box input to show the dropped items */}
      <input id="text-box-input" type="text" />
    </div>
  </div>
);

Accepted Answer

Yes, it is possible to drag and drop list items on an image in React. You can use the HTML5 Drag and Drop API to achieve this. Here is a brief overview of how you can do it: 1. First, you need to add an event listener for the dragstart event on each list item. 2. In the event listener, you need to set the data that will be transferred when the item is dragged. 3. Then, you need to add an event listener for the dragover event on the image element. 4. In the event listener, you need to prevent the default behavior of the browser and set the dropEffect property of the event to move. 5. Finally, you need to add an event listener for the drop event on the image element. 6. In the event listener, you can get the data that was set in step 2 and display it in a text box input. Here is an example code snippet that demonstrates how you can achieve this:

import React from 'react';

function App() {
  const handleDragStart = (event) => {
    // Set data that will be transferred when item is dragged
    event.dataTransfer.setData('text/plain', event.target.id);
  };

  const handleDragOver = (event) => {
    // Prevent default behavior of browser
    event.preventDefault();
    // Set dropEffect property of event to move
    event.dataTransfer.dropEffect = 'move';
  };

  const handleDrop = (event) => {
    // Get data that was set when item was dragged
    const id = event.dataTransfer.getData('text');
    const element = document.getElementById(id);
    const content = element.textContent;
    // Display content in text box input
    document.getElementById('textbox').value = content;
  };

  return (
    <div>
      <img src="path/to/image" onDragOver={handleDragOver} onDrop={handleDrop} />
      <ul>
        <li id="item1" draggable onDragStart={handleDragStart}>
          Item 1
        </li>
        <li id="item2" draggable onDragStart={handleDragStart}>
          Item 2
        </li>
        <li id="item3" draggable onDragStart={handleDragStart}>
          Item 3
        </li>
      </ul>
      <input type="text" id="textbox" />
    </div>
  );
}

I hope this helps! Let me know if you have any further questions.

Sources

How to Build Drag and Drop Components in React - MUO Create a drag-and-drop with react-dropzone - LogRocket Blog How to Add Drag and Drop in React with React Beautiful DnD reactjs - react drag and drop list item - Stack Overflow Creating a Drag and Drop List with React Hooks - DEV Community