Create A Drag And Drop Using Html, Css And, Javascript

Create A Drag And Drop Using Html, Css And, Javascript

A very warm welcome to the codewithrandom today’s blog in which we are going to create a drag and drop using html,css, and javascript. So let’s see the code.

Live server:-

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.

 

See the Pen
Untitled
by Himanshu Singh (@himanishu)
on CodePen.

Html 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.? 

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 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.

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.

#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.

Javascript code Drag And Drop:-

With the html dom, javascript can access and change all the elements of an html document.

The html dom (document object model)

When a web page is loaded, the browser creates a document object model of the page.

Reacting to events

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:

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.

 100+ Front-end Projects for Web developers (Source Code)

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; } }

Output of Above Example.

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

Share on:

Leave a Comment