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

2

9 Answers

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"></div>

Demo

• draggable attribute on HTML5 Rocks
• CSS resize property on MDN

4

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:

And if you don't mind using some great library, I would encourage you to try Dragula.

3

Only using css techniques this does not seem possible to me. But you could use jqueryui draggable:

$('#drag_me').draggable();

1

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.

You can do it now by using the CSS property -webkit-user-drag:

#drag_me { -webkit-user-drag: element;
}

<div draggable="true"> 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:

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> <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" --> <div>Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p>
</div> 

I hope you can use it to!

1

Draggable div not possible only with CSS, if you want draggable div you must need to use javascript.

0

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.

$('#dialog').draggable({ handle: "#tblOverlay" , scroll: false }); // Pop up Window <div> <table> <tr><td></td></tr> <table> </div>

Options:

1. handle : Avoids the sticky scroll bar issue. Sometimes your mouse pointer will stick to the popup window while dragging.
2. scroll : Prevent popup window to go beyond parent page or out of current screen.

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy