-1 votos

Dragueo en Javascript no funciona

Hola buen día resulta que tengo el siguiente error tengo el siguiente código para draguear pero no me esta funcionando me esta saliendo el siguiente error, el código que tengo es el siguiente: código js: function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } código html <div class="puntodrag1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> cuando arrastro la imagen al div, me sale el siguiente error en la consola del navegador: uncaught typeerror failed to execute 'appendchild' on 'node' parameter 1 is not of type 'node'. Como hago para solucinar este error y que este me funcione de forma correcta, agradecería mucho una ayuda, muchas gracias, saludos....

-1voto

Bueno acá vengo yo mismo a responder mi pregunta con el siguiente ejemplo sacado de la pagina de http://www.w3schools.com/html/html5_draganddrop.asp, aca esta el ejemplo:

Archivo HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title> Prueba Dragueo </title> <link rel="stylesheet" type="text/css" href="css/estilos.css"> <script type="text/javascript" src="js/drag.js"></script> </head> <body> <h3> Ejemplo arrastrar imagen en JavaScript con HTML5 y CSS3 </h3> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img id="drag1" src="images/logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </div> </body> </html>

Archivo CSS

div1 {

width:350px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;

}

div2 {

width:350px;
height:70px;
margin-top:20px;
padding:10px;
border:1px solid #aaaaaa;

}

drag1 {

cursor:move;

}

Archivo JS

function allowDrop(ev) { ev.preventDefault(); }

function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }

function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }

El anterior ejemplo es el mismo que van a encontrar el sitio web http://www.w3schools.com, cuando busquen en Google solamente que yo le hice un pequeño cambio y es que en el ejemplo original solamente me permite arrastrar la imagen de un punto a otro ya, en mi ejemplo yo lo que hice fue arrastrar la imagen y poder devolverla al lugar en donde estaba y viceversa

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: