许多可在屏幕上自由拖动的图像

Many draggable images freely in the screen

本文关键字：拖动 图像 自由 屏幕 许多可      更新时间：2023-09-26

我正在尝试建立一个页面，所以我和我的团队可以在屏幕上自由地定位一些图像。问题是，我不知道如何使这些图像可拖动。我试着自己弄清楚，并提出了一个很好的话题:HTML5拖放移动一个div在屏幕上的任何地方?

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

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

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

谢谢!

这个是我刚编出来的，它有一些bug，但是你可以摆弄一下。

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

你可以使用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

相关文章：