0

I'm trying to build a page so me and my team can position some images freely on the screen. The problem is that I can't figure out a way to make those images draggable. I tried to figure out by myself and came upon this nice topic about it: HTML5 drag and drop to move a div anywhere on the screen?

I've tried to apply this idea to my page and replace "getElementsByID" with "getElementsByClassName" but no dice.

In addition, it would be twice as nice if the draggable image were to respect the responsiveness of the page, if anyone knows how to do that.

Here is the codepen with my attempt: http://codepen.io/GuiHarrison/pen/EsHyr

Thanks!

Community
  • 1
  • 1
Digger
  • 718
  • 1
  • 9
  • 22

2 Answers2

0

Well, I just made this up, it's kinda buggy, but you can play around with it.

<html>
<head>
    <style>
        #mydiv{
        width: 100px;
        height: 100px;
        border: solid black 1px;
        position: absolute;
        }
    </style> 
</head>
<body>
    <div id="mydiv" onmousedown="ismousedown(1)" onmouseup="ismousedown(0)" onmousemove="mousemove(event)"></div>
    <script>
        var mousedown = false;
        function ismousedown(tf){
            if(tf == 1){
            mousedown = true;
            }
            else{
                mousedown = false;
            }
        }
        function mousemove(event){
            if(mousedown){
                document.getElementById("mydiv").style.left=event.pageX;
                document.getElementById("mydiv").style.top=event.pageY;
            }
        }
    </script>
</body>

Zachrip
  • 3,242
  • 1
  • 17
  • 32
0

You can use kineticjs for this. Check this!

http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

This is more relevant,

http://html5example.net/entry/html5-canvas/html5-canvas-drag-and-drop-multiple-images-with-kineticjs

MJQ
  • 1,778
  • 6
  • 34
  • 60
  • Thanks! I took a long look and I'm still struggling with this one. The current version of kinetic is 4.3.3 and it seems that that example is crashing on the new versions. Or I'm just screwing up big time... – Digger Mar 04 '13 at 20:17