Funcionalidad de arrastrar y soltar dentro del lienzo utilizando HTML5

Hola a todos, ¿podemos colocar la funcionalidad de arrastrar y soltar dentro del lienzo usando html5?Funcionalidad de arrastrar y soltar dentro del lienzo utilizando HTML5

Mi requisito real es arrastrar la imagen en el cuadro de texto que debe hacerse dentro del lienzo ... por favor comparta sus ideas ... El siguiente enlace solía aprender a arrastrar y soltar, pero debe hacerse dentro del lienzo. .

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

Fuente

2012-07-17 Anonymous

Usted debe enviar su problema específico y código de ejemplo que no funcionó. –

puede obtener más información en este tutorial: http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/

Desde su descripción limitada en su pregunta, parece que arrastra elementos sobre el lienzo y este tutorial es probablemente el mejor partido.

Este es el código real puede pegar en archivo y abierto en el navegador compatible con HTML 5 y funcionará:

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

Fuente

2012-07-17 04:27:33

Hola @Mike eche un vistazo a http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop –

siga las instrucciones en el enlace del artículo que publiqué y podrá. También hay un ejemplo de trabajo cerca del final del tutorial, puede arrastrar un recuadro negro alrededor del lienzo en blanco. –

Gracias @Mark S. Pero por favor vaya a través del enlace que le di a http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop no es cinético js para usar es un javascript simple así que podría usted poder contar cómo implementar la misma función en cinéticaJS –

Funcionalidad de arrastrar y soltar dentro del lienzo utilizando HTML5

Respuesta

Cuestiones relacionadas