Make Div Draggable using CSS - html

Question

I want to make my div tag with id "drag_me" to be draggable up to the length of 300px from left and 460px from top, only using CSS.
I also want to make it resizable. Again same condition as above i.e. no Javascript or jquery.
What's the solution for this?

Answer 1

This is the best you can do without JavaScript:
[draggable=true] {
cursor: move;
}
.resizable {
overflow: scroll;
resize: both;
max-width: 300px;
max-height: 460px;
border: 1px solid black;
min-width: 50px;
min-height: 50px;
background-color: skyblue;
}
<div draggable="true" class="resizable"></div>
Demo
draggable attribute on HTML5 Rocks
CSS resize property on MDN

Answer 2

You can take a look at HTML 5, but I don't think you can restrict the area within you can drag it, just the destination:
http://www.w3schools.com/html/html5_draganddrop.asp
And if you don't mind using some great library, I would encourage you to try Dragula.

Answer 3

Only using css techniques this does not seem possible to me. But you could use jqueryui draggable:
$('#drag_me').draggable();

Answer 4

I found this from W3Schools is really helpful:
// Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
#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;
}
<!-- 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>
I hope you can use it to!

Answer 5

CSS is designed to describe the presentation of documents. It has a few features for changing that presentation in reaction to user interaction (primarily :hover for indicating that you are now pointing at something interactive).
Making something draggable isn't a simple matter of presentation. It is firmly in the territory of interactivity logic, which is handled by JavaScript.
What you want is not achievable.

Answer 6

You can do it now by using the CSS property -webkit-user-drag:
#drag_me {
-webkit-user-drag: element;
}
<div draggable="true" id="drag_me">
Your draggable content here
</div>
This property is only supported by webkit browsers, such as Safari or Chrome, but it is a nice approach to get it working using only CSS.
The HTML5 draggable attribute is only set to ensure dragging works for other browsers.
You can find more information here: http://help.dottoro.com/lcbixvwm.php

Answer 7

Draggable div not possible only with CSS, if you want draggable div you must need to use javascript.
http://jqueryui.com/draggable/

Answer 8

After going down the rabbit-hole of trying to do this myself by copy-pasting various code-snippets from Stack Overflow, I would highly recommend just using the InteractJS library, which allows you to create a draggable and resizable div (somewhat) easily.

Answer 9

$('#dialog').draggable({ handle: "#tblOverlay" , scroll: false });
// Pop up Window
<div id="dialog">
<table id="tblOverlay">
<tr><td></td></tr>
<table>
</div>
Options:
handle : Avoids the sticky scroll bar issue. Sometimes your mouse pointer will stick to the popup window while dragging.
scroll : Prevent popup window to go beyond parent page or out of current
screen.