我正在尝试构建一个页面，以便我和我的团队可以在屏幕上自由放置一些图像。问题是我无法找到使这些图像可拖动的方法。我试图自己弄清楚并想到了一个关于它的好话题：HTML5 拖放以将 div 移动到屏幕上的任何位置？
我试图将这个想法应用到我的页面上，并用“getElementsByClassName”替换“getElementsByID”，但没有骰子。
此外，如果可拖动图像尊重页面的响应性，如果有人知道如何做到这一点，那将是两倍好。
这是我尝试的代码笔：http: //codepen.io/GuiHarrison/pen/EsHyr
谢谢！
好吧，我只是编造了这个，它有点马车，但你可以玩弄它。
<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