Drag and Drop functionality inside canvas using HTML5

2018-06-03 04:15:05

Hello all can we place drag and drop functionality inside canvas using html5??

My actual requirement is to drag the image into textbox that should be done inside the canvas... please share your ideas..The following link i used to learn drag and drop but it should be done inside the canvas..

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

You can learn more in this tutorial: http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/

From your limited description in your question, it sounds like you drag items over the canvas and this tutorial is likely the best match.

This is the actual code you can paste into file and open in HTML5 compliant browser and it will work:

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

链接地址: http://www.djcxy.com/p/10978.html

上一篇: 创建QTransform给定4个点，定义变换后的单位正方形

下一篇: 使用HTML5在画布内拖放功能