Drag and drop no funciona en moviles y tablets

Buenas, tengo un programa que utiliza Drag and Drop de Html 5. Consigo que funcione en todos los navegadores, (menos en versiones inferiores de IE10, que tengo entendido que es imposible).

Lo que no consigo hacer es que funcione en móviles y tablets.

La dirección es www.circuloamistad.com/v8 Bodas y Eventos->Configura tu menú. Podeis ver todo el código (inluido CSS) en el código fuente.

He buscado un código con Jquery Mobile, pero no se como implementarlo con el que tengo de Jquery normal.

Este código SI me funciona en moviles.

Código Javascript :

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
    <script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
      <style>
        #objeto1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
        #caja_principal { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
        </style>
        <script>
        $(function() {
          $( ".objeto1" ).draggable({
          
         dragstar: function( event, ui ) {
         return empezar(event);
         }
          
          });
          
          $( "#menu" ).droppable({
            drop: function( event, ui ) {
              $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                  .html( "Dropped!" );
            }
          });
        });
        </script>

   
      <div id="olakease"  class="objeto1"  >
        <p>Drag me to my target</p>
      </div>
      
      <div id="olakease2" class="menu">
      <p>Drop me</p>
      </div>

   

Y despues tengo este, que hace muchas funciones, pero que NO me funciona en móviles

Código Javascript :

<script type="text/javascript">
var datos = "";
var precio = 0;
        function dobleclick(e){
            
            var variable = e.target.getAttribute('id');
            
            //alert(variable);
            
            return empezar(e);
            
        }
    function empezar(e) {
        e.dataTransfer.effectAlloweb = 'move';
        e.dataTransfer.setData("Data", e.target.getAttribute('id'));
        e.dataTransfer.setData("Data2", e.target.getAttribute('title'));
        e.dataTransfer.setDragImage(e.target, 0, 0);
    
        return true;
    }
    function enter(e) {
        return true;
        
    }
    function over(e) {
        var esarrastrable = e.dataTransfer.getData("Data");
        var id = e.target.getAttribute('id');
        var esarrastrable2 = e.dataTransfer.getData("Data2");
    
    /*    if (id == 'caja_principal')
            return false;*/
            
        if (id == 'menu')
            return false;
        else
            return true;
    
            
    }
    function drop(e) {
        
        var id = e.target.getAttribute('id');
        var esarrastrable = e.dataTransfer.getData("Data");
        var esarrastrable2 = e.dataTransfer.getData("Data2");

    
            if (id == "menu"){
                
        datos += "<br>"+esarrastrable;
        precio = precio + eval(esarrastrable2);
        
        //alert(datos);
        //alert(precio);
        
            }
 
        /*    if (id == "caja_principal"){
                
                precio = precio - eval(esarrastrable2);
                
        alert(datos);
        alert(precio);
             
        }*/
        e.target.appendChild(document.getElementById(esarrastrable));
        e.stopPropagation();
        return false;
    }
    function end(e) {
        e.dataTransfer.clearData("Data");
        return true
    }
</script> 

 <div id="caja_principal"  ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">
<div id="<? echo $total_menu; ?>" title="<? echo $precio; ?>"  class="objeto1" ondblclick="return dobleclick(event)" draggable="true"  ondragstart="return empezar(event)" ondragend="return end(event)" ><img src="<? echo $foto; ?>" width="60" height="50" draggable="false" /><br /><br /><? echo $descr; ?></div>
<div id="menu" ondragenter="return enter(event)" ondragover="return over(event)"  ondrop="return drop(event)"></div>

Pues eso, despues de varias horas, no he conseguido que el segundo funcione en Android. Y he decido empezar de 0 desde aquí. ¿Que debo hacer?

Jquery y JqueryMobile no son lo mismo ni sirven para lo mismo.

Solo debes saber que JqueryMobile necesita de Jquery.

tienes los eventos: dragstart y drop.. ahi puedes meter las funciones adicionales que necesites. solo hechale una leidita a la documentación.

Me recomiendas hacer una versión para móviles/tablets en JqueryMobile y otra para pc, en Jquery. ?? O hacerlo todo en JqueryMobile.

Estoy metiendo las funciones de mi código Jquery en el código JqueryMobile, pero el problema me viene al meter la información. Mi fallo es querer utilizar por ejemplo (e.dataTransfer.setData("Data", e.target.getAttribute('id'))) , supongo que en JqueryMobile será diferente. ¿Es cuestión de ver documentación no?

prueba con javascript a ver si te funka con la funcio que he hecho

drag cualquier objeto div con javascript para todos los browsers

pruebalo y me dices que tal

Gracias aukun, mi código funciona en todos los navegadores menos IE9 a anteriores. Lo que necesito es que funcione en Android.

en vez de poner ese codigo para dragear objetos mira de ponerlo asi a ver si te funca.

aki tienes un ejemplo que hice en su gran mayoria en javascript sin jquery:

Código HTML :

<!DOCTYPE html><html id=ihtml><head id=ihead><meta charset="utf-8"><script>

//gebi caught object by id 
function gebi(i){return document.getElementById(i);}
//function for svgo for make svg object (create svg object)
function sobj(i,t,p){var u='http://www.w3.org/2000/svg';var n=document.createElementNS(u,t);n.id=i;gebi(p).appendChild(n);}
//function for create svg object(put more attributes in svg object)
function svgo(i,y,p){sobj(i,'svg',p);sans(i,'xlink','http://www.w3.org/1999/xlink');sans(i,'viewBox','0 0 512 512');sans(i,'enable-background','new 0 0 512 512');sans(i,'title',y);}
//unsel unselect object by id
function unsel(i){var e=gebi(i);var s = e.style;s.userSelect = "none";s.webkitUserSelect = "none";s.MozUserSelect = "none";e.setAttribute("unselectable", "on");}
//create object put id-> i:String ; type of element(for exemple 'body' or 'div' or ...) -> t:String, id parent -> p:String
function obj(i,t,p){var n=document.createElement(t);n.id=i;gebi(p).appendChild(n);}
//efect alpha overmouse
function ef(i){var k=gebi(i);k.addEventListener("mouseover",function(){k.style.opacity=0.5;});k.addEventListener("mouseout",function(){k.style.opacity=1;});}
//create a box id->i:String;left->x:String;top->y:String;height->h:String;width->w:String
function kxa(i,x,y,h,w,c){var n = gebi(i);unsel(i);n.style.border="1px solid "+c;n.style.position="absolute";n.style.left=x+"px";n.style.top=y+"px";if(h=='auto'){n.style.height=h;}else{n.style.height=h+"px";}if(w=='auto'){n.style.height=w;}else{n.style.width=w+"px";}}
//create type of corners
function can(i,d,u,c,s){var k=gebi(i);k.style.borderRadius=d+"px "+u+"px "+c+"px "+s+"px";}
//efect drag function event
function drag(e2){function mou(e2){o.style.left=e2.pageX-x0+px+"px";o.style.top=e2.pageY-y0+py+"px";document.addEventListener("mouseup", upm, true);}function upm(e2){document.removeEventListener("mousemove", mou, true);document.removeEventListener("mouseup", upm, true);}o=document.getElementById(this.id);x0=e2.pageX;y0=e2.pageY;px=parseInt(o.style.left);py=parseInt(o.style.top);document.addEventListener("mousemove", mou, true);document.addEventListener("mouseup", upm, true);}
//svgp crea objeto svg path
function svgp(i,p,d,c){sobj(i+p,'path',p);sans(i+p,"fill",c);sans(i+p,"d",d);}
//sans add svg attribute id->i:String;svg type of attribute->t:String;value svg attribute->d:String
function sans(i,t,d){var e=gebi(i);e.setAttributeNS(null,t,d);}
//svgc crea objeto svg circle
function svgc(i,p,x,y,r,c){sobj(i+p,'circle',p);sans(i+p,"cx",x);sans(i+p,"cy",y);sans(i+p,"r",r);sans(i+p,"fill",c);} 
//create a link in a object id object->i:String; link->l:String
function link(i,l){gebi(i).onclick=function (){window.location.replace(l);};}

//////////////////////////////system encrypt decrypt function created by aukun
//functions for enigma2
function intercanvi(a,u,v){var a=a;var u=u%a.length;var v=v%a.length;var b=a[u];var c=a[v];a[u]=c;a[v]=b;return a;}
function norepetit(s){var f='';var z='';for(var i=0;i<s.length;i++){z=s.charAt(i);if(f.indexOf(z)==-1){f=f+z;}else{}}return f;}
function mesclar(a,b){var a=a;var b=b;if(a.length<b.length){var g=b;var p=a;}else{var g=a;var p=b;}var t=Math.floor(g.length/p.length);var h=g;for(var i=0;i<p.length;i++){var lletra=p.charAt(i);h=g;g=h.substring(0,((t+1)*i)+1)+lletra+h.substring(((t+1)*i)+1);}return g;}
//function for decrypt string->t:String;length of original string->f
function desenigma2(t,f){var u=desmesclar(t,f);var strf=u[1];var r=u[0];var arr=r.split('');var strf2='';for(var j=0;j<strf.length;j++){var lletra=strf.charAt(strf.length-1-j);var index0=arr.indexOf(lletra);var index1=index0-j+((2*strf.length)-1);arr=intercanvi(arr,index0,index1);strf2=arr[index0]+strf2;}return strf2;}
//functions for desenigma
function desmesclar(a,n){if(arguments.length==1){var n=16;}else if(arguments.length>1){var n=n;}else{}   var a=a;var l=(a.length-n);var t=Math.floor(n/l);var p='';var g=a;var z=0;for(var i=0;i<l;i++){z=(t*i)+1;p=p+g.substring(z,z+1);g=g.substring(0,z)+g.substring(z+1);}var u=new Array();u[0]=p;u[1]=g;return u;}


//make body
obj('ibody','body','ihtml');
//make div idiv0
obj('idiv0','div','ibody');
//make box for idiv0
kxa('idiv0','5','5','155','155','#bbbbbb');can('idiv0','10','10','10','10');
//make variables for changeline
var cl=String.fromCharCode(13)+String.fromCharCode(10);var cll=cl+cl;   
//make svg object login
svgo('svglogin',cl+'   LOGIN   '+cll,'idiv0');
//put path object in svg object (svglogin)
svgp('p1','svglogin',"M356,283c-27,22-62,34-99,34c-36,0-71-12-99-35C83,309,50,404,50,448h412C462,405,428,310,356,283z",'black');
svgc('c1','svglogin','250','165','120','black');
svgc('c2','svglogin','299','303','60','white');
svgc('c3','svglogin','326','282','15','black');
svgp('p2','svglogin',"M254,395h-23v23h-24v22h-54v-38l78-78c8,21,26,38,49,46L254,395z",'white');
//efect alphas
ef('idiv0');
//create drag efect
gebi('idiv0').onmousedown=drag;
//pongo el link con el string encriptado
link('idiv0',desenigma2('c.aissm/atar/folrctpim:hp:ioiasbmrthb..mhl','26'))

/*system aukun, created by aukun thanks to all for read me*/
</script></head></html>

Solo necesitas poner estas funciones

Código Javascript :

function gebi(i){return document.getElementById(i);}
function drag(e2){function mou(e2){o.style.left=e2.pageX-x0+px+"px";o.style.top=e2.pageY-y0+py+"px";document.addEventListener("mouseup", upm, true);}function upm(e2){document.removeEventListener("mousemove", mou, true);document.removeEventListener("mouseup", upm, true);}o=document.getElementById(this.id);x0=e2.pageX;y0=e2.pageY;px=parseInt(o.style.left);py=parseInt(o.style.top);document.addEventListener("mousemove", mou, true);document.addEventListener("mouseup", upm, true);}
gebi('iddetuelementoquequieresdragear').onmousedown=drag;

pruebalo en android i me dices si te funciona

Ok,gracias Aukun, voy a probarlo, ya te cuento!

Supongo que el tema eventos funcionara de diferente manera en una pantalla tactil u otra, de manera que lo logico seria investigar en android con pantalla tactil que eventos del raton emulan al dedo de la pantalla tactil, si logras conseguir que el drag te sea funcional pasame i comparte el codigo sera trabajo que luego no tendre que hacer al investigar con javascript (sin jquery) jejejeje.