Basically, it is an element that you can drag anywhere on the web page. We see this kind of draggable element in many large websites or applications.
If you have difficulty understanding what I am saying then follow the preview below. Here you will find a live preview of this Draggable Div Element design and the required source code.
As you can see above, I designed a web page. I made a small box on it. Under normal conditions, this box will be in top: 0 and left: 0 positions.
You can then move it to the angle and position of your choice. I have created a profile card in this element. For the profile, first, we added the profile image, some basic text, and four social media buttons.
Step 1: Basic structure of draggable div
First I created the basic structure of the Drag element. Here you can create using a single div if you want. But I have used a div and a header here.
Div is basically the basic structure and the header is the part where you can drag by clicking. Although the length of the header here is equal to the size of the whole box. So you can move Div Element by clicking on any part of the box.
I have designed the webpage of this project using the following CSS codes. Here a blue color is used in the background of the webpage.
Step 2: Basic design of Div Element
Now the basic structure of the element or the box has been created. Box width: 21rem, height: 21rem, and a light border has been used all around. Shadow has been used here to enhance the beauty.
This will allow you to move it by clicking anywhere in the entire box. Cursor: move is used here, so moving the mouse over the box will change the style of the cursor.
Here we have shared the necessary explanations of the code lines. Hopefully, these codes will not be a problem for you to understand.
To make this div element draggable complete the work above. Now you can move this element anywhere.
You can add any information here. Here I have added a profile card. If you want to add a profile card to that draggable element then follow the steps below. Otherwise, skip the steps.
Step 4: Add content to Draggable Element
# HTML code of the profile card
I have added all the information on the profile card here using the following HTML codes. The profile card is basically a structure, then a profile image, some basic text, and four social media icons.
# Design cards and profile images
The basic structural design and profile image of the profile card has been designed using the following codes.
# Design Basic Text
The text is designed by the code below.
# Design social icons
Now is the time to design the icons on social media. I have used four icons here. Each of their icons uses a different color.
🎉 Your project, is ready to use 🎉
If you can’t put the codes together, you can follow the code section below. Here I have put all the codes together. You can directly copy the code and use it in any of your work.
I hope this tutorial helps you to know how to create drag and drop div. If there is any problem then you must let me know by commenting.