Foros del Web » Creando para Internet » HTML »

Problema con drop y drag de html5

Estas en el tema de Problema con drop y drag de html5 en el foro de HTML en Foros del Web. Tengo un problema con este codigo de html5... el problema esta donde puse un comentario en el codigo. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original <!DOCTYPE ...
  #1 (permalink)  
Antiguo 18/09/2011, 09:08
 
Fecha de Ingreso: marzo-2011
Ubicación: Arandas Jalisco En mexico
Mensajes: 35
Antigüedad: 13 años
Puntos: 0
Pregunta Problema con drop y drag de html5

Tengo un problema con este codigo de html5... el problema esta donde puse un comentario en el codigo.

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html xml:lang="es_MX" lang="es_MX">
  3.     <head>
  4.         <title>Ejemplo de arrastrar y soltar</title>
  5.         <style type="text/css">
  6.             #destino1,#destino2,#destino3 {
  7.                 float: left;
  8.                 width: 250px;
  9.                 height: 250px;
  10.                 padding: 10px;
  11.                 margin: 10px;
  12.             }
  13.            
  14.             #arrastrable1,#arrastrable2,#arrastrable3 {
  15.                 width: 75px;
  16.                 height: 70px;
  17.                 padding: 5px;
  18.                 margin: 5px;
  19.             }
  20.            
  21.             #destino1 { background-color: #F00;}
  22.             #destino2 { background-color: #0F0;}
  23.             #destino3 {background-color: #00F;}
  24.            
  25.             #arrastrable1 {background-color: rgba(255,0,0,.5);}
  26.             #arrastrable2 {background-color: rgba(0,255,0,.5);}
  27.             #arrastrable3 {background-color: rgba(0,0,255,.5);}
  28.            
  29.         </style>
  30.         <script type="text/javascript">
  31.             function start(e)
  32.             {
  33.                 e.dataTransfer.effectAllowed = "move";
  34.                 e.dataTransfer.setData("Data",e.target.getAttribute("id"));
  35.                 e.dataTransfer.setDragImage(e.target, 0, 0);
  36.                 return true;
  37.             }
  38.            
  39.             function enter(e)
  40.             {
  41.                 return true;
  42.             }
  43.            
  44.             function over(e)
  45.             {
  46.                 var esA = e.dataTransfer.getData("Data");    //aqui esta el error, getData no me funciona
  47.                 var id = e.target.getAttribute("id");
  48.                
  49.                
  50.                 if(id == "destino1") return false;
  51.                
  52.                 if((id == "destino2") && esA == "arrastrable3") return false;
  53.                 else
  54.                 if (id == "destino3" && (esA == "arrastrable1" || esA == "arrastrable2"))
  55.                 {
  56.                     return false;
  57.                 }else return true;
  58.             }
  59.            
  60.             function drop(e)
  61.             {
  62.                 var esA = e.dataTransfer.getData("Data");
  63.                 e.target.appendChild(document.getElementById(esA));
  64.                 e.stopPropagation();
  65.                 return false;
  66.             }
  67.            
  68.             function end(e)
  69.             {
  70.                 e.dataTransfer.clearData("Data");
  71.                 return true;
  72.             }
  73.         </script>
  74.     </head>
  75.     <body>
  76.         <h1>Ejemplo de arrastrar y soltar en HTML5</h1>
  77.         <div id="destino1" ondragenter="return enter(event);" ondragover="return over(event);" ondrop="return drop(event);">
  78.             <div id="arrastrable1" draggable="true" ondragstart="return start(event);" ondragend="return end(event);">
  79.                 1          
  80.             </div>
  81.             <div id="arrastrable2" draggable="true" ondragstart="return start(event);" ondragend="return end(event);">
  82.                 2
  83.             </div>
  84.             <div id="arrastrable3" draggable="true" ondragstart="return start(event);" ondragend="return end(event);">
  85.                 3          
  86.             </div>     
  87.         </div>
  88.        
  89.         <div id="destino2" ondragenter="return enter(event);" ondragover="return over(event);" ondrop="return drop(event);">
  90.         </div>
  91.        
  92.         <div id="destino3" ondragenter="return enter(event);" ondragover="return over(event);" ondrop="return drop(event);">
  93.         </div>
  94.     </body>
  95. </html>



esto solo pasa en chrome y ff si me funciona


ojala me puedan ayudar.


gracias

Última edición por Jnuserful; 18/09/2011 a las 10:52

Etiquetas: css, drag, drop, html5
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:09.