Hello all,
I’ve searched the internet but without result.
Is there a simple code to make a DIV (popup) moveable (draggable)?
The DIV has some child elements
All help is welcome
1 Like
Maybe check out jQuery.
It is a drag and drop tutorial on their website.
Thank you for suggesting but I’m really looking for a pure JS solution.
I am still learining JS.
The link is about drag and drop.
I need something to make my DIV-popup draggable/floatable like a browser alert box is.
please do some search from your end to.
You want a pure javascript draggable.
This means you need to make use off html5 javascript functions…
http://stackoverflow.com/questions/7278409/html5-drag-and-drop-to-move-a-div-anywhere-on-the-screen
There is no such thing. HTML5 is a markup language and JavaScript is a programming language. You don’t have to use any HTML5 to be able to write pure JS that can move the divs around. You can use it but the two are completely independent.
See http://javascriptexample.net/anim30.php for an example of a pure JS drag and drop.
1 Like
concept_core suggested this link.
This is what I was looking for, too bad though that it is not possible in JS to overrule the transparency reduction while dragging. 
Maybe you can.
Add a class while on drag if possible.
Well the link I suggested to take a look, states you need to add “draggable” in you html element.
And since draggable is new to html5 I referred it as html5 javascript.
So my bad for my mistake but even so it is still trough that I meant to use html5 and javascript to achieve this.
Here a link to clarify.
Best regards.
Not quite sure how you think to do this by adding a class.
Could you give me an example?
http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element
You need to add that to the function that fires when the drag starts.
I think it would work not 100% sure.
I know how to add a class, but what is you want the class to do? Set the opacity to 1?
You add a class to your style sheet with your requirements like opacity.
And that class you add to your element when your dragging it.
The example I posted doesn;t need any HTML 5
I have a Codepen of a popup/draggable modal window that I put together when I was trying to do something similar.
The only thing it’s missing is the opaque part, but it’s pure JS and ready to experiment with styles.
1 Like
Thanks zackw.
I actually found a working example like yours.
The problem with both is the transparency upon dragging.
There seems to be no solution to this,
Btw I really like the transparent border in your example!
Well it’s a limitation of HTML5 which is really a limitation of browser-implementation.
Probably only a browser plugin would have the power to change this behavior, maybe even not then.
You’d have to write a crazy script to do this with HTML5’s help. Or just use a library with their own crazy script, i.e. jQuery or Mootools etc.
The idea is to write your own custom drag script instead of using HTML5 “draggable”. Even then, you’d have to consider browser support, and especially mobile support with touch when writing your own script.
I already posted such an example in post 7 of this thread. That one doesn’t use dragabble and doesn’t require any HTML 5 at all (the example uses header tags but you could easily substitute any HTML 4 tags instead). With that version any transparency can be controlled entirely from within the CSS.
Hello Felgall!
I’ve played with the example you provided in in your post #7 but I can’t set the transparency to nill.
Here is it in JSFiddle