Drag And Drop Using HTML, CSS, and JavaScript
A very warm welcome to the codewithrandom. In today’s blog in which we are going to create a Drag and Drop using JavaScript. We Create Div Using Html and and Style Using Css and Give Drag and Drop functionality using JavaScript.
So let’s see the Html, Css, and JavaScript Code.
Live Preview Of Drag And Drop Using JavaScript
You can check here how the draggable div container works. This will help you to understand how to write code while developing the draggable div.
Html Code For Drag And Drop:-
We use html for creating the basic layout of the website. Here we are using the basic concepts of html like div, id, and paragraph tag.
What is div.?
Div. Is script part of html where we can different division of webpage to make it look good.
Div. Can also be dynamic by using javascript.
What is a draggable div.?
50+ Html ,Css & Javascript Projects With Source Code
Draggable div. Is a dynamic div element, which is created using css and javascript with html.
Draggable div. Is mainly used to create a moveable division of the web page for ease and easy usage.
Draggable div. Can be easily moved around the webpage
Example of draggable div.
<!-- Draggable DIV --> <div id="mydiv"> <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" --> <div id="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div>
Css Code For Drag And Drop:-
Css is used for styling the layout. Here we are using the basic concepts of css for stylings like positioning, id selectors,z-index,cursor property, and border-box.
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute, or sticky).
The position property specifies the type of positioning method used for an element.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
There are five different position values:
Static
Relative
Fixed
Absolute
Sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
Position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note: absolute positioned elements are removed from the normal flow, and can overlap elements.
Portfolio Website using HTML and CSS (Source Code)
#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
text-align: center;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
Note:- as we have created a draggable div. So, the position of the div. In the must be kept absolute rest you can play around.
ADVERTISEMENT
Drag And Drop Using JavaScript:-
With the html dom, javascript can access and change all the elements of an html document.
ADVERTISEMENT
The html dom (document object model)
ADVERTISEMENT
When a web page is loaded, the browser creates a document object model of the page.
ADVERTISEMENT
Reacting to events
ADVERTISEMENT
A javascript can be executed when an event occurs, like when a user clicks on an html element.
To execute code when a user clicks on an element, add javascript code to an html event attribute:
Examples of html events:
When a user clicks the mouse
When a web page has loaded
When an image has been loaded
When the mouse moves over an element
When an input field is changed
When an html form is submitted
When a user strokes a key
The onmousedown and onmouseup events
The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First, when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered.
The offsettop property returns the top position (in pixels) relative to the parent.
The returned value includes:
Weather App Using Html,Css And JavaScript
The top position, and margin of the element
The top padding, scrollbar, and border of the parent
The offsettop property is read-only.
The offsetleft property returns the left position (in pixels) relative to the parent.
The returned value includes:
The left position, and margin of the element
The left padding, scrollbar and border of the parent
The offsetleft property is read-only.
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(
elmnt.id + "header"
).onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
Password Strength Checker using HTML ,CSS & JavaScript
Final Output Of Drag and Drop Using JavaScript
Hope you like this blog …
If you have nay doubts or queries related to the blog or web devlopement then feel free to comment down.
Written by:-himanshu singh
