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   Can any one suggest the solution for this     Thanks in advance to all

User · Answer

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

_x000D_

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

_x000D_

<div draggable="true" id="drag_me">_x000D_
  Your draggable content here_x000D_
</div>

_x000D_

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

User · Answer

I found this is really helpful    x000D   x000D     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    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    x000D    lt  -- Draggable DIV -- gt  x000D   lt div id  mydiv  gt  x000D     lt  -- Include a header DIV with the same name as the draggable DIV  followed by  header  -- gt  x000D     lt div id  mydivheader  gt Click here to move lt  div gt  x000D     lt p gt Move lt  p gt  x000D     lt p gt this lt  p gt  x000D     lt p gt DIV lt  p gt  x000D   lt  div gt   x000D   x000D   x000D    I hope you can use it to

User · Answer

dialog   draggable   handle    tblOverlay    scroll  false             Pop up Window             lt div id  dialog  gt                           lt table  id  tblOverlay  gt                               lt tr gt  lt td gt  lt  td gt  lt  tr gt                            lt table gt              lt  div gt    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

User · Answer

This is the best you can do without JavaScript    x000D   x000D   draggable true    x000D    cursor  move  x000D    x000D   x000D   resizable   x000D    overflow  scroll  x000D    resize  both  x000D    max-width  300px  x000D    max-height  460px  x000D    border  1px solid black  x000D    min-width  50px  x000D    min-height  50px  x000D    background-color  skyblue  x000D    x000D   lt div draggable  true  class  resizable  gt  lt  div gt  x000D   x000D   x000D    Demo   draggable attribute on HTML5 Rocks CSS resize property on MDN

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[html] Make Div Draggable using CSS

Examples related to html

Examples related to css