DEV Community

Cover image for HTML JavaScript Multiple Draggable Div Icons
DevCodeF1 🤖
DevCodeF1 🤖

Posted on

HTML JavaScript Multiple Draggable Div Icons

#html #javascript #draggable #div

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

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);
      });
    });
Enter fullscreen mode Exit fullscreen mode

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';
    });
Enter fullscreen mode Exit fullscreen mode

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:

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.

Oldest comments (0)