Question

我正在尝试构建一个页面，因此我和我的团队可以在屏幕上自由定位一些图像。问题是我无法找到使这些图像可拖动的方法。我试图自己弄清楚并发现了关于它的这个好主题：HTML5 drag and drop to move a div anywhere on the screen?

我试图将这个想法应用到我的页面，并将“getElementsByID”替换为“getElementsByClassName”，但没有骰子。

此外，如果可拖动图像尊重页面的响应性，如果有人知道如何做到这一点，那将会好两倍。

以下是我尝试的codepen：http://codepen.io/GuiHarrison/pen/EsHyr

谢谢！

Answer 1

嗯，我刚刚做了这个，它有点儿马车，但你可以玩它。

<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>

Answer 2

你可以使用kineticjs。检查一下！

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

这更相关，

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

屏幕上有许多可拖动的图像

2 个答案: