0

我正在尝试构建一个页面，以便我和我的团队可以在屏幕上自由放置一些图像。问题是我无法找到使这些图像可拖动的方法。我试图自己弄清楚并想到了一个关于它的好话题：HTML5 拖放以将 div 移动到屏幕上的任何位置？

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

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

这是我尝试的代码笔：http: //codepen.io/GuiHarrison/pen/EsHyr

谢谢！

4

2 回答 2

0

好吧，我只是编造了这个，它有点马车，但你可以玩弄它。

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

于 2013-03-01T14:25:16.490 回答
0

您可以为此使用 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

于 2013-03-01T14:49:10.070 回答