7

こんにちは、HTML5 を使用してキャンバス内にドラッグ アンド ドロップ機能を配置できますか??

私の実際の要件は、キャンバス内で行う必要があるテキストボックスに画像をドラッグすることです...あなたのアイデアを共有してください..次のリンクはドラッグアンドドロップを学ぶために使用しましたが、キャンバス内で行う必要があります..

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop

4

1 に答える 1

4

このチュートリアルで詳細を学ぶことができます：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,y,w,h);
 ctx.closePath();
 ctx.fill();
}

function clear() {
 ctx.clearRect(0, 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,0,WIDTH,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>
于 2012-07-17T04:27:33.380 に答える