Make Div Draggable using CSS

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?

Since it is necessary to know the starting and ending mouse coordinates, it is impossible without a line of Javascript. You either must accept JS or quit looking for a solution. — John Strood, Jul 01 '16 at 12:03
Btw, you can make a `div` "draggable" without JS, but you cannot "drag" it. — John Strood, Jul 01 '16 at 12:05

score 52 · Accepted Answer · edited Jun 06 '19 at 00:22

52

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

edited Jun 06 '19 at 00:22

OXiGEN

2,041
25
19

answered May 16 '13 at 05:10

Web_Designer

72,308
93
206
262

9

I wish dragging in that demo would work in Firefox or Chrome... that'd be really nice. – dakab Feb 24 '16 at 07:43
15

In July of 2018, this demo does not work. Please consider updating, if you have a modern technique that works. – Dave Land Jul 17 '18 at 22:31
3

Draggable function does not work, it only allows to resize – johannesMatevosyan Jul 29 '18 at 12:24
3

The demo does work on Chrome. It allows the user to drag the `div`. There's nowhere to drop it but it can be dragged from the original location. – OXiGEN Jun 05 '19 at 21:20

Alvaro · Answer 2 · 2016-04-06T09:03:16.223

20

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.

edited Apr 06 '16 at 09:03

answered Nov 23 '12 at 10:06

Alvaro

40,778
30
164
336

I have already checked it but they are using javascript code. I don't want any javascript script at all for my project... – Jeet Nov 23 '12 at 10:12
3

I have google for this a lot and come up with conclusion that its not possible with only CSS, I have to use javascript. The solution you have given is the one and here is the another solution i have got http://codepen.io/chriscoyier/pen/zdsty – Jeet Nov 23 '12 at 10:28
1

I would recommend you to use JavaScript or any of its libraries. – Alvaro Nov 23 '12 at 10:32

score 17 · Answer 3 · answered Nov 23 '12 at 10:03

17

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

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

answered Nov 23 '12 at 10:03

Dominik Schreiber

2,629
1
23
33

3

Thanks a lot Dominik. I know that using draggable() function of jqueryui its possible but i don't want to use jquery or javascript. Please direct me if any one have any idea – Jeet Nov 23 '12 at 10:07

score 12 · Answer 4 · edited Apr 10 '21 at 04:37

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!

This is exactly what I was looking for! Much appreicated. Was stumped for a bit but realised that I needed to call the javascript after defining the
. — tjheslin1, Oct 04 '20 at 17:01

Quentin · Answer 5 · 2012-11-23T10:32:30.520

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.

score 9 · Answer 6 · edited Jun 06 '19 at 01:01

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

score 2 · Answer 7 · answered Sep 07 '19 at 18:28

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.

score 1 · Answer 8 · answered Nov 23 '12 at 10:23

1

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

http://jqueryui.com/draggable/

answered Nov 23 '12 at 10:23

Dhamu

1,694
5
22
47

score 0 · Answer 9 · answered Aug 10 '23 at 16:35

0

Had the same issue and found that it was honestly just better to use jquery. I'm new to web development but the library is super small and this take is completed with just one function instead of that whole block in the w3schools answer. if your project allows it (like mine ended up) use this solution

$(function(){
    $("#item").dragable()
});

answered Aug 10 '23 at 16:35

knox0

17
7

This is not what the OP was asking. Besides, there is another almost identical answer to which the OP replied that this is not what he was asking for. – Giorgio Tempesta Aug 16 '23 at 07:08

score -1 · Answer 10 · answered May 03 '18 at 20:59

$('#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.

The question asks us not to use JavaScript or jQuery. – OXiGEN Jun 05 '19 at 21:11 — OXiGEN, Jun 05 '19 at 21:11

Make Div Draggable using CSS

10 Answers10

Linked