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.
Can any one suggest the solution for this...
Thanks in advance to all
Draggable div not possible only with CSS, if you want draggable div you must need to use javascript.
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.
I found this is really helpful:
// Make the DIV element draggable:_x000D_
dragElement(document.getElementById("mydiv"));_x000D_
_x000D_
function dragElement(elmnt) {_x000D_
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;_x000D_
if (document.getElementById(elmnt.id + "header")) {_x000D_
// if present, the header is where you move the DIV from:_x000D_
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;_x000D_
} else {_x000D_
// otherwise, move the DIV from anywhere inside the DIV:_x000D_
elmnt.onmousedown = dragMouseDown;_x000D_
}_x000D_
_x000D_
function dragMouseDown(e) {_x000D_
e = e || window.event;_x000D_
e.preventDefault();_x000D_
// get the mouse cursor position at startup:_x000D_
pos3 = e.clientX;_x000D_
pos4 = e.clientY;_x000D_
document.onmouseup = closeDragElement;_x000D_
// call a function whenever the cursor moves:_x000D_
document.onmousemove = elementDrag;_x000D_
}_x000D_
_x000D_
function elementDrag(e) {_x000D_
e = e || window.event;_x000D_
e.preventDefault();_x000D_
// calculate the new cursor position:_x000D_
pos1 = pos3 - e.clientX;_x000D_
pos2 = pos4 - e.clientY;_x000D_
pos3 = e.clientX;_x000D_
pos4 = e.clientY;_x000D_
// set the element's new position:_x000D_
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";_x000D_
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";_x000D_
}_x000D_
_x000D_
function closeDragElement() {_x000D_
// stop moving when mouse button is released:_x000D_
document.onmouseup = null;_x000D_
document.onmousemove = null;_x000D_
}_x000D_
}#mydiv {_x000D_
position: absolute;_x000D_
z-index: 9;_x000D_
background-color: #f1f1f1;_x000D_
border: 1px solid #d3d3d3;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
#mydivheader {_x000D_
padding: 10px;_x000D_
cursor: move;_x000D_
z-index: 10;_x000D_
background-color: #2196F3;_x000D_
color: #fff;_x000D_
} <!-- Draggable DIV -->_x000D_
<div id="mydiv">_x000D_
<!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->_x000D_
<div id="mydivheader">Click here to move</div>_x000D_
<p>Move</p>_x000D_
<p>this</p>_x000D_
<p>DIV</p>_x000D_
</div> I hope you can use it to!
$('#dialog').draggable({ handle: "#tblOverlay" , scroll: false });
// Pop up Window
<div id="dialog">
<table id="tblOverlay">
<tr><td></td></tr>
<table>
</div>
Options:
Only using css techniques this does not seem possible to me. But you could use jqueryui draggable:
$('#drag_me').draggable();
You can do it now by using the CSS property -webkit-user-drag:
#drag_me {_x000D_
-webkit-user-drag: element;_x000D_
}<div draggable="true" id="drag_me">_x000D_
Your draggable content here_x000D_
</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
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.
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.
Source: Stackoverflow.com