Resizable and draggable div

Question

I'm making windows javascript emulation. Right now, I'm creating program windows. They have code like this:

    <div class="program" draggable="true">
            ...more imgs
    <img src="./res/img/closeButton.png" title="Close">
    <iframe src="./programs/fileExplorer" width="900px" height="500px" class="programBorder"></iframe>
</div>

I need to make whole div draggable (on top bar) and resizable (side and bottom bars full, top only small part). It would be really cool to get it done without javascript (css only), but it is OK to do it with javascript/JQuery

[Google is your friend](https://www.google.it/search?q=jquery+draggable+resizable&oq=jquery+draggable+resizable). — moonwave99, Dec 28 '13 at 19:51
@moonwave99 That is not an actual answer. The question here is if it is possible "to get it done without javascript (css only)" --Anagmate. jQuery is therefore not an answer. — Joeytje50, Dec 28 '13 at 20:38
Dragging and resizing completely without javascript? not possible. — Tim Seguine, Dec 28 '13 at 20:40
@joeytje50 honestly didn't know about that one. Probably I focus too much on IE support. ;) — Tim Seguine, Dec 28 '13 at 20:50
I'm voting to close this question as off-topic because SO is here to help with code you wrote but SO is not here to write code for you or run you through a tutorial. — Rob, Jun 28 '17 at 12:43

score 0 · Answer 1 · answered Dec 28 '13 at 20:36

0

Use jQueryUI instead, http://jqueryui.com/dialog/ it has both draggable and re-sizable options readily available, else you can go through the library and implement the same logic.

answered Dec 28 '13 at 20:36

Souvik Banerjee

187
1
3
14

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Draggable elements

It is currently impossible to make draggable elements without using css+html only. What you could do is just use jQuery to solve this. Alternatively, you could see this answer to another question that explains how to make draggable elements without jQuery.

Resizable elements

This one is indeed possible to do with CSS only, and it's quite simple. Just use resize:both on the element. This table shows the browser support for CSS-only resize, so you should probably consider that when making your site. You could also use jQuery as a fallback for IE.

Here is a demo for the different types of resizing there are.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 28 '13 at 20:48

Joeytje50

18,636
15
63
95

Maybe mention the browser (lack of) support a bit more explicitly? You would need a polyfill if you intend to use it for any serious web development. – Tim Seguine Dec 28 '13 at 20:54
Nice, but I have more problem. resize:both makes window resizable only by dragging on right-bottom corner, I want to make resizable on all edges. – Anagmate Dec 28 '13 at 21:29
This is the only kind of resizing that's available to CSS. CSS is not designed to make more complicated interactivity for your site. If you're really going to need actual interactivity you're going to have to use JavaScript. – Joeytje50 Dec 28 '13 at 21:32

Resizable and draggable div

2 Answers2

Draggable elements

Resizable elements