HTML JavaScript Multiple Draggable Div Icons
Tags: html, javascript, draggable, div
Published: 2023-08-21 17:08:03

HTML JavaScript Multiple Draggable Div Icons
--------------------------------------------

Have you ever wanted to add some interactivity to your website by allowing users to drag and drop icons around the screen? Look no further! In this article, we'll explore how to create multiple draggable div icons using HTML and JavaScript. Get ready to add some fun and functionality to your web development projects!

To get started, let's first understand the basic structure of our draggable div icons. We'll create a container div that will hold all the icons. Inside this container, we'll create individual divs for each icon. These divs will have a unique ID, which we'll use later to make them draggable.

Here's a simple example of the HTML structure:

 

    
        <div id="container">
          <div id="icon1" class="icon"></div>
          <div id="icon2" class="icon"></div>
          <div id="icon3" class="icon"></div>
        </div>
      

 

Next, let's add some CSS to make our icons look visually appealing. We can give them a background color, border, and some padding to make them stand out. Feel free to get creative and style them as you like!

 

    
        .icon {
          background-color: #ffcc00;
          border: 1px solid #333;
          padding: 10px;
        }
      

 

Now comes the fun part – making our icons draggable! We'll use JavaScript to achieve this. We can use the `draggable` attribute to make an element draggable, but we'll also need to handle the drag events to control its behavior.

 

    
        var icons = document.getElementsByClassName('icon');
        Array.prototype.forEach.call(icons, function(icon) {
          icon.addEventListener('dragstart', function(event) {
            event.dataTransfer.setData('text/plain', event.target.id);
          });
        });
      

 

In the above code, we select all the elements with the class "icon" and attach a dragstart event listener to each of them. Inside the event listener, we set the data to be dragged using `event.dataTransfer.setData`. In this case, we're setting the ID of the dragged element as plain text.

Finally, we need to handle the drop event to place the dragged icon at the desired location. We'll add the following JavaScript code:

 

    
        var container = document.getElementById('container');
        container.addEventListener('drop', function(event) {
          event.preventDefault();
          var iconId = event.dataTransfer.getData('text/plain');
          var icon = document.getElementById(iconId);
          icon.style.left = event.clientX + 'px';
          icon.style.top = event.clientY + 'px';
        });
      

 

In the above code, we prevent the default behavior of the drop event using `event.preventDefault()`. Then, we retrieve the ID of the dragged icon and use it to get a reference to the icon element. Finally, we set the left and top CSS properties of the icon to the current mouse position, making it appear as if it's being dragged and dropped.

And voila! We now have multiple draggable div icons on our web page. Feel free to experiment and enhance the functionality further. You can add additional features like snapping icons to a grid or restricting dragging within certain boundaries.

So go ahead, unleash your creativity, and make your website more interactive with draggable div icons!

### References:

*   [MDN Web Docs - Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
*   [W3Schools - HTML Drag and Drop](https://www.w3schools.com/html/html5_draganddrop.asp)
*   [SitePoint - How to Implement Drag and Drop in Your React App](https://www.sitepoint.com/how-to-implement-drag-and-drop-in-your-react-app/)

### Explore our wide range of articles on software development to further expand your knowledge and skills. Stay updated with the latest trends and techniques in the industry.

*   #### [Startup Issue on HP ENVY x360 Convertible 15 ed1xxx - No Display](https://notes.devcodef1.com//startup-issue-on-hp-envy-x360-convertible-15-ed1xxx-no-display)
    
    This article addresses the startup issue on the HP ENVY x360 Convertible 15 ed1xxx where the display is not functioning. It provides troubleshooting steps and solutions related to the BIOS settings.
    
*   #### [Linked List: Problem with merging and concatenating lists](https://devcodef1.com/news/1039769/linked-list-problem-with-merging-and-concatenating-lists)
    
    This article discusses the common problems encountered while merging and concatenating linked lists in the C programming language. It provides insights into the challenges faced and offers solutions to overcome them.