大家好我们可以使用
html5在canvas中放置拖放功能吗？
我的实际要求是将图像拖动到应该在画布内完成的文本框中…
请分享您的想法.以下链接我曾经学习拖放但它应该在画布内完成..
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop
解决方法
您可以在本教程中了解更多信息：
http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/
从您在问题中的有限描述中,听起来像是在画布上拖动项目,本教程可能是最佳匹配.
这是您可以粘贴到文件中并在符合HTML5的浏览器中打开的实际代码,它将起作用：
<!doctype html>
<html>
<head>
<Meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
var canvas;
var ctx;
var x = 75;
var y = 50;
var WIDTH = 400;
var HEIGHT = 300;
var dragok = false;
function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,h);
ctx.closePath();
ctx.fill();
}
function clear() {
ctx.clearRect(0,WIDTH,HEIGHT);
}
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw,10);
}
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0,HEIGHT);
ctx.fillStyle = "#444444";
rect(x - 15,y - 15,30,30);
}
function myMove(e){
if (dragok){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
}
}
function myDown(e){
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
e.pageY > y -15 + canvas.offsetTop){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
dragok = true;
canvas.onmousemove = myMove;
}
}
function myUp(){
dragok = false;
canvas.onmousemove = null;
}
init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
</script>
</section>
</body>
</html>