Problema drag and drop html5

eimdal #1 Jun '14

El problema que tengo es que todos los ejemplos que he visto de drag and drop son de mover una imagen a un sitio concreto, y necesito mover una imagen a cualquier posicion de la pantalla, ademas esa imagen deberia clonarse, alguien sabe como hacerlo?

Merkury #2 Jun '14

Jquery UI Drag and Drop

1

eimdal #3 Jun '14

Al final tengo este codigo para el html:

spoiler

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Paint Tool</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="Event.js"></script>
    <script type="text/javascript" src="paint.js"></script>
    <script type="text/javascript" src="init.js"></script>
  <style>
    body{padding:20px;}
    #container{
      border:solid 3px black;
      margin-top: 10px;
      width:wWidth-20;
      height:wHeight-20;
    }
    #toolbar{
      width:wWidth-20;
      height:wHeight-20;
      border:solid 3px black;
    }
    #toolbar2{
      width:wWidth-20;
      height:wHeight-20;
      border:solid 3px black;
    }
    #toolbar3{
      width:wWidth-20;
      height:wHeight-20;
      border:solid 3px black;
    }
  </style>        

</head>

<body>
  <script type="text/javascript">
  /// Prevent native scrolling in iOS.
  Event.add(document.body, 'touchmove', Event.prevent);   

  /// Prevent right-click on desktops.
  Event.add(document.body, 'contextmenu', Event.prevent);
  </script>
    <div id = "toolbar">
        <img id = "paint" width=52 height=52 src="img/Lapiz Negro-01.png">
        <img id = "paint2" width=52 height=52 src="img/Lapiz Rojo-01.png">
        <img id = "erase" width=52 height=52 src="img/Goma-01.png">
        <img id = "clear" width=52 height=52 src="img/Limpiar-01.png">
        <img id = "size1" width=52 height=52 src="img/Dot Small-01.png">
        <img id = "size2" width=52 height=52 src="img/Dot Medium-01.png">
        <img id = "size3" width=52 height=52 src="img/Dot Big-01.png">   

        <img id = "save" width=52 height=52 src="img/Guardar-01.png"> 
    </div><br>
    <div id="toolbar2">
        <img id="via1"  width=52 height=52 src="img/Cruce1.png">
        <img id="via2" width=52 height=52 src="img/Cruce2.png">
        <img id="via3" width=52 height=52 src="img/Cruce3.png">
        <img id="via4" width=52 height=52 src="img/Cruce4.png">
        <img id="via5" width=52 height=52 src="img/Cruce5.png">
        <img id="via6" width=52 height=52 src="img/Cruce6.png">
        <img id="via7" width=52 height=52 src="img/Cruce7.png">
        <img id="via8" width=52 height=52 src="img/Cruce8.png">
        <img id="via9" width=52 height=52 src="img/Curva1.png">
        <img id="via10" width=52 height=52 src="img/Curva2.png">
        <img id="via11" width=52 height=52 src="img/Curva3.png">
        <img id="via12" width=52 height=52 src="img/Curva4.png">
        <img id="via13" width=52 height=52 src="img/MediaCurva1.png">
        <img id="via14" width=52 height=52 src="img/MediaCurva2.png">
        <img id="via15" width=52 height=52 src="img/MediaCurva3.png">
        <img id="via16" width=52 height=52 src="img/MediaCurva4.png">
        <img id="via17" width=52 height=52 src="img/Recta1.png">
        <img id="via18" width=52 height=52 src="img/Recta2.png">
    </div><br>
    <div id="toolbar3">
        <img id="icon1" width=52 height=52 src="img/Icon1.png">
        <img id="icon2" width=52 height=52 src="img/Icon2.png">
        <img id="icon3" width=52 height=52 src="img/Icon3.png">
        <img id="icon4" width=52 height=52 src="img/Icon4.png">
        <img id="icon5" width=52 height=52 src="img/Icon5.png">
        <img id="icon6" width=52 height=52 src="img/Icon6.png">
        <img id="icon7" width=52 height=52 src="img/Icon7.png">
        <img id="icon8" width=52 height=52 src="img/Icon8.png">
        <img id="icon9" width=52 height=52 src="img/Icon9.png">
        <img id="icon10" width=52 height=52 src="img/Icon10.png">
        <img id="icon11" width=52 height=52 src="img/Icon11.png">
        <img id="icon12" width=52 height=52 src="img/Icon12.png">
        <img id="icon13" width=52 height=52 src="img/Icon13.png">
        <img id="icon14" width=52 height=52 src="img/Icon14.png">
        <img id="icon15" width=52 height=52 src="img/Icon15.png">
    </div><br>
    <div id="container"></div>
</body>
</html>

Y este para el JS:

spoiler


function init() {
var wWidth = window.innerWidth - 100;
var wHeigth = window.innerHeight - 100;
var color ="black";
var sizeDraw = 5;

/** 
  * get a reference to the via in the toolbar
  *hide the via until its image has loaded
  */

var $via1=$("#via1");
$via1.hide();
var $via2=$("#via2");
$via2.hide();
var $via3=$("#via3");
$via3.hide();
var $via4=$("#via4");
$via4.hide();
var $via5=$("#via5");
$via5.hide();
var $via6=$("#via6");
$via6.hide();
var $via7=$("#via7");
$via7.hide();
var $via8=$("#via8");
$via8.hide();
var $via9=$("#via9");
$via9.hide();
var $via10=$("#via10");
$via10.hide();
var $via11=$("#via11");
$via11.hide();
var $via12=$("#via12");
$via12.hide();
var $via13=$("#via13");
$via13.hide();
var $via14=$("#via14");
$via14.hide();
var $via15=$("#via15");
$via15.hide();
var $via16=$("#via16");
$via16.hide();
var $via17=$("#via17");
$via17.hide();
var $via18=$("#via18");
$via18.hide();


/** 
  * get a reference to the icon in the toolbar
  * hide the icon until its image has loaded
  */

var $icon1=$("#icon1");
$icon1.hide();
var $icon2=$("#icon2");
$icon2.hide();
var $icon3=$("#icon3");
$icon3.hide();
var $icon4=$("#icon4");
$icon4.hide();
var $icon5=$("#icon5");
$icon5.hide();
var $icon6=$("#icon6");
$icon6.hide();
var $icon7=$("#icon7");
$icon7.hide();
var $icon8=$("#icon8");
$icon8.hide();
var $icon9=$("#icon9");
$icon9.hide();
var $icon10=$("#icon10");
$icon10.hide();
var $icon11=$("#icon11");
$icon11.hide();
var $icon12=$("#icon12");
$icon12.hide();
var $icon13=$("#icon13");
$icon13.hide();
var $icon14=$("#icon14");
$icon14.hide();
var $icon15=$("#icon15");
$icon15.hide();
var $icon16=$("#icon16");
$icon16.hide();
var $icon17=$("#icon17");
$icon17.hide();
var $icon18=$("#icon18");
$icon18.hide();

// get the offset position of the kinetic container
var $stageContainer=$("#container");
var stageOffset=$stageContainer.offset();
var offsetX=stageOffset.left;
var offsetY=stageOffset.top;

// create the Kinetic.Stage and layer
var stage = new Kinetic.Stage({
    container: 'container',
    width: wWidth,
    height: wHeigth
});
var layer = new Kinetic.Layer();
stage.add(layer);

var background = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: wWidth+10,
        height: wHeigth+10,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 1,
    })        
    layer.add(background);
    layer.draw();


    // a flag we use to see if we're dragging the mouse
    var isMouseDown=false;
    // a reference to the line we are currently drawing
    var newline;
    // a reference to the array of points making newline
    var points=[];

    // on the background
    // listen for mousedown, mouseup and mousemove events
    background.on('mousedown', function(){onMousedown();});
    background.on('mouseup', function(){onMouseup();});
    background.on('mousemove', function(){onMousemove();});
    //background.on('touchstart', function(){onMousedown();});
    //background.on('touchend', function(){onMouseup();});
    //background.on('touchmove', function(){onMousemove();});

    // On mousedown
    // Set the isMouseDown flag to true
    // Create a new line,
    // Clear the points array for new points
    // set newline reference to the newly created line
    function onMousedown(event) {
        isMouseDown = true;
        points=[];
        points.push(stage.getPointerPosition());
        var line = new Kinetic.Line({
            points: points,
            stroke: color,
            strokeWidth: sizeDraw,
            lineCap: 'round',
            lineJoin: 'round'
        });
        layer.add(line);
        newline=line;
    }

    // on mouseup end the line by clearing the isMouseDown flag
    function onMouseup(event) {
        isMouseDown=false;
    }

    // on mousemove
    // Add the current mouse position to the points[] array
    // Update newline to include all points in points[]
    // and redraw the layer
    function onMousemove(event) {
        if(!isMouseDown){return;};
        points.push(stage.getPointerPosition());
        newline.setPoints(points);
        layer.drawScene();
    }




// start loading the image used in the draggable toolbar element
// this image will be used in a new Kinetic.Image

var image1=new Image();
image1.onload=function(){
    $via1.show();
}
image1.src="img/Cruce1.png";
var image2=new Image();
image2.onload=function(){
    $via2.show();
}
image2.src="img/Cruce2.png";
var image3=new Image();
image3.onload=function(){
    $via3.show();
}
image3.src="img/Cruce3.png";
var image4=new Image();
image4.onload=function(){
    $via4.show();
}
image4.src="img/Cruce4.png";
var image5=new Image();
image5.onload=function(){
    $via5.show();
}
image5.src="img/Cruce5.png";
var image6=new Image();
image6.onload=function(){
    $via6.show();
}
image6.src="img/Cruce6.png";
var image7=new Image();
image7.onload=function(){
    $via7.show();
}
image7.src="img/Cruce7.png";
var image8=new Image();
image8.onload=function(){
    $via8.show();
}
image8.src="img/Cruce8.png";
var image9=new Image();
image9.onload=function(){
    $via9.show();
}
image9.src="img/Curva1.png";
var image10=new Image();
image10.onload=function(){
    $via10.show();
}
image10.src="img/Curva2.png";
var image11=new Image();
image11.onload=function(){
    $via11.show();
}
image11.src="img/Curva3.png";
var image12=new Image();
image12.onload=function(){
    $via12.show();
}
image12.src="img/Curva4.png";
var image13=new Image();
image13.onload=function(){
    $via13.show();
}
image13.src="img/MediaCurva1.png";
var image14=new Image();
image14.onload=function(){
    $via14.show();
}
image14.src="img/MediaCurva2.png";
var image15=new Image();
image15.onload=function(){
    $via15.show();
}
image15.src="img/MediaCurva3.png";
var image16=new Image();
image16.onload=function(){
    $via16.show();
}
image16.src="img/MediaCurva4.png";
var image17=new Image();
image17.onload=function(){
    $via17.show();
}
image17.src="img/Recta1.png";
var image18=new Image();
image18.onload=function(){
    $via18.show();
}
image18.src="img/Recta2.png";


//Icons

var imgicon1=new Image();
imgicon1.onload=function(){
    $icon1.show();
}
imgicon1.src="img/Icon1.png";
var imgicon2=new Image();
imgicon2.onload=function(){
    $icon2.show();
}
imgicon2.src="img/Icon2.png";
var imgicon3=new Image();
imgicon3.onload=function(){
    $icon3.show();
}
imgicon3.src="img/Icon3.png";
var imgicon4=new Image();
imgicon4.onload=function(){
    $icon4.show();
}
imgicon4.src="img/Icon4.png";
var imgicon5=new Image();
imgicon5.onload=function(){
    $icon5.show();
}
imgicon5.src="img/Icon5.png";
var imgicon6=new Image();
imgicon6.onload=function(){
    $icon6.show();
}
imgicon6.src="img/Icon6.png";
var imgicon7=new Image();
imgicon7.onload=function(){
    $icon7.show();
}
imgicon7.src="img/Icon7.png";
var imgicon8=new Image();
imgicon8.onload=function(){
    $icon8.show();
}
imgicon8.src="img/Icon8.png";
var imgicon9=new Image();
imgicon9.onload=function(){
    $icon9.show();
}
imgicon9.src="img/Icon9.png";
var imgicon10=new Image();
imgicon10.onload=function(){
    $icon10.show();
}
imgicon10.src="img/Icon10.png";
var imgicon11=new Image();
imgicon11.onload=function(){
    $icon11.show();
}
imgicon11.src="img/Icon11.png";
var imgicon12=new Image();
imgicon12.onload=function(){
    $icon12.show();
}
imgicon12.src="img/Icon12.png";
var imgicon13=new Image();
imgicon13.onload=function(){
    $icon13.show();
}
imgicon13.src="img/Icon13.png";
var imgicon14=new Image();
imgicon14.onload=function(){
    $icon14.show();
}
imgicon14.src="img/Icon14.png";
var imgicon15=new Image();
imgicon15.onload=function(){
    $icon15.show();
}
imgicon15.src="img/Icon15.png";
var imgicon16=new Image();
imgicon16.onload=function(){
    $icon16.show();
}
imgicon16.src="img/Icon16.png";
var imgicon17=new Image();
imgicon17.onload=function(){
    $icon17.show();
}
imgicon17.src="img/Icon17.png";
var imgicon18=new Image();
imgicon18.onload=function(){
    $icon18.show();
}
imgicon18.src="img/Icon18.png";

//Creation of listeners for click and touch events.

$('#erase').get(0).addEventListener('click', function(e) { erase(); }, false);
$('#clear').get(0).addEventListener('click', function(e) { onReset(); }, false);
$('#size1').get(0).addEventListener('click', function(e) { onSizeClick(e.target.id); }, false);
$('#size2').get(0).addEventListener('click', function(e) { onSizeClick(e.target.id); }, false);
$('#size3').get(0).addEventListener('click', function(e) { onSizeClick(e.target.id); }, false);
$('#save').get(0).addEventListener('click', function(e) { onSave(); }, false);
$('#paint').get(0).addEventListener('click', function(e) { paint(); }, false);
$('#paint2').get(0).addEventListener('click', function(e) { paintRed(); }, false);


//Change brush color to white 
function erase(){
    color = "white";
}

//Change brush color to black 
function paint(){
    color = "black";
}

//Change brush color to red 
function paintRed(){
    color = "red";
}


//Make vias draggables.
$via1.draggable({
    helper:'clone',
});
$via2.draggable({
    helper:'clone',
});
$via3.draggable({
    helper:'clone',
});
$via4.draggable({
    helper:'clone',
});
$via5.draggable({
    helper:'clone',
});
$via6.draggable({
    helper:'clone',
});
$via7.draggable({
    helper:'clone',
});
$via8.draggable({
    helper:'clone',
});
$via9.draggable({
    helper:'clone',
});
$via10.draggable({
    helper:'clone',
});
$via11.draggable({
    helper:'clone',
});
$via12.draggable({
    helper:'clone',
});
$via13.draggable({
    helper:'clone',
});
$via14.draggable({
    helper:'clone',
});
$via15.draggable({
    helper:'clone',
});
$via16.draggable({
    helper:'clone',
});
$via17.draggable({
    helper:'clone',
});
$via18.draggable({
    helper:'clone',
});

//Make icons draggables.

$icon1.draggable({
    helper:'clone',
});
$icon2.draggable({
    helper:'clone',
});
$icon3.draggable({
    helper:'clone',
});
$icon4.draggable({
    helper:'clone',
});
$icon5.draggable({
    helper:'clone',
});
$icon6.draggable({
    helper:'clone',
});
$icon7.draggable({
    helper:'clone',
});
$icon8.draggable({
    helper:'clone',
});
$icon9.draggable({
    helper:'clone',
});
$icon10.draggable({
    helper:'clone',
});
$icon11.draggable({
    helper:'clone',
});
$icon12.draggable({
    helper:'clone',
});
$icon13.draggable({
    helper:'clone',
});
$icon14.draggable({
    helper:'clone',
});
$icon15.draggable({
    helper:'clone',
});
$icon16.draggable({
    helper:'clone',
});
$icon17.draggable({
    helper:'clone',
});
$icon18.draggable({
    helper:'clone',
});


// set the data payload
$via1.data("url","via1.png"); // key-value pair
$via1.data("width","32"); // key-value pair
$via1.data("height","33"); // key-value pair
$via1.data("image",image1); // key-value pair
$via2.data("url","via2.png"); // key-value pair
$via2.data("width","32"); // key-value pair
$via2.data("height","33"); // key-value pair
$via2.data("image",image2); // key-value pair
$via3.data("url","via3.png"); // key-value pair
$via3.data("width","32"); // key-value pair
$via3.data("height","33"); // key-value pair
$via3.data("image",image3); // key-value pair
$via4.data("url","via4.png"); // key-value pair
$via4.data("width","32"); // key-value pair
$via4.data("height","33"); // key-value pair
$via4.data("image",image4); // key-value pair
$via5.data("url","via5.png"); // key-value pair
$via5.data("width","32"); // key-value pair
$via5.data("height","33"); // key-value pair
$via5.data("image",image5); // key-value pair
$via6.data("url","via6.png"); // key-value pair
$via6.data("width","32"); // key-value pair
$via6.data("height","33"); // key-value pair
$via6.data("image",image6); // key-value pair
$via7.data("url","via7.png"); // key-value pair
$via7.data("width","32"); // key-value pair
$via7.data("height","33"); // key-value pair
$via7.data("image",image7); // key-value pair
$via8.data("url","via8.png"); // key-value pair
$via8.data("width","32"); // key-value pair
$via8.data("height","33"); // key-value pair
$via8.data("image",image8); // key-value pair
$via9.data("url","via9.png"); // key-value pair
$via9.data("width","32"); // key-value pair
$via9.data("height","33"); // key-value pair
$via9.data("image",image9); // key-value pair
$via10.data("url","via10.png"); // key-value pair
$via10.data("width","32"); // key-value pair
$via10.data("height","33"); // key-value pair
$via10.data("image",image10); // key-value pair
$via11.data("url","via11.png"); // key-value pair
$via11.data("width","32"); // key-value pair
$via11.data("height","33"); // key-value pair
$via11.data("image",image11); // key-value pair
$via12.data("url","via12.png"); // key-value pair
$via12.data("width","32"); // key-value pair
$via12.data("height","33"); // key-value pair
$via12.data("image",image12); // key-value pair
$via13.data("url","via13.png"); // key-value pair
$via13.data("width","32"); // key-value pair
$via13.data("height","33"); // key-value pair
$via13.data("image",image13); // key-value pair
$via14.data("url","via13.png"); // key-value pair
$via14.data("width","32"); // key-value pair
$via14.data("height","33"); // key-value pair
$via14.data("image",image14); // key-value pair
$via15.data("url","via15.png"); // key-value pair
$via15.data("width","32"); // key-value pair
$via15.data("height","33"); // key-value pair
$via15.data("image",image15); // key-value pair
$via16.data("url","via16.png"); // key-value pair
$via16.data("width","32"); // key-value pair
$via16.data("height","33"); // key-value pair
$via16.data("image",image16); // key-value pair
$via17.data("url","via17.png"); // key-value pair
$via17.data("width","32"); // key-value pair
$via17.data("height","33"); // key-value pair
$via17.data("image",image17); // key-value pair
$via18.data("url","via18.png"); // key-value pair
$via18.data("width","32"); // key-value pair
$via18.data("height","33"); // key-value pair
$via18.data("image",image18); // key-value pair
   


   //Icons

$icon1.data("url","icon1.png"); // key-value pair
$icon1.data("width","32"); // key-value pair
$icon1.data("height","33"); // key-value pair
$icon1.data("image",imgicon1); // key-value pair
$icon2.data("url","icon2.png"); // key-value pair
$icon2.data("width","32"); // key-value pair
$icon2.data("height","33"); // key-value pair
$icon2.data("image",imgicon2); // key-value pair
$icon3.data("url","icon3.png"); // key-value pair
$icon3.data("width","32"); // key-value pair
$icon3.data("height","33"); // key-value pair
$icon3.data("image",imgicon3); // key-value pair
$icon4.data("url","icon4.png"); // key-value pair
$icon4.data("width","32"); // key-value pair
$icon4.data("height","33"); // key-value pair
$icon4.data("image",imgicon4); // key-value pair
$icon5.data("url","icon5.png"); // key-value pair
$icon5.data("width","32"); // key-value pair
$icon5.data("height","33"); // key-value pair
$icon5.data("image",imgicon5); // key-value pair
$icon6.data("url","icon6.png"); // key-value pair
$icon6.data("width","32"); // key-value pair
$icon6.data("height","33"); // key-value pair
$icon6.data("image",imgicon6); // key-value pair
$icon7.data("url","icon7.png"); // key-value pair
$icon7.data("width","32"); // key-value pair
$icon7.data("height","33"); // key-value pair
$icon7.data("image",imgicon7); // key-value pair
$icon8.data("url","icon8.png"); // key-value pair
$icon8.data("width","32"); // key-value pair
$icon8.data("height","33"); // key-value pair
$icon8.data("image",imgicon8); // key-value pair
$icon9.data("url","icon9.png"); // key-value pair
$icon9.data("width","32"); // key-value pair
$icon9.data("height","33"); // key-value pair
$icon9.data("image",imgicon9); // key-value pair
$icon10.data("url","icon10.png"); // key-value pair
$icon10.data("width","32"); // key-value pair
$icon10.data("height","33"); // key-value pair
$icon10.data("image",imgicon10); // key-value pair
$icon11.data("url","icon11.png"); // key-value pair
$icon11.data("width","32"); // key-value pair
$icon11.data("height","33"); // key-value pair
$icon11.data("image",imgicon11); // key-value pair
$icon12.data("url","icon12.png"); // key-value pair
$icon12.data("width","32"); // key-value pair
$icon12.data("height","33"); // key-value pair
$icon12.data("image",imgicon12); // key-value pair
$icon13.data("url","icon13.png"); // key-value pair
$icon13.data("width","32"); // key-value pair
$icon13.data("height","33"); // key-value pair
$icon13.data("image",imgicon13); // key-value pair
$icon14.data("url","icon13.png"); // key-value pair
$icon14.data("width","32"); // key-value pair
$icon14.data("height","33"); // key-value pair
$icon14.data("image",imgicon14); // key-value pair
$icon15.data("url","icon15.png"); // key-value pair
$icon15.data("width","32"); // key-value pair
$icon15.data("height","33"); // key-value pair
$icon15.data("image",imgicon15); // key-value pair
$icon16.data("url","icon16.png"); // key-value pair
$icon16.data("width","32"); // key-value pair
$icon16.data("height","33"); // key-value pair
$icon16.data("image",imgicon16); // key-value pair
$icon17.data("url","icon17.png"); // key-value pair
$icon17.data("width","32"); // key-value pair
$icon17.data("height","33"); // key-value pair
$icon17.data("image",imgicon17); // key-value pair
$icon18.data("url","icon18.png"); // key-value pair
$icon18.data("width","32"); // key-value pair
$icon18.data("height","33"); // key-value pair
$icon18.data("image",imgicon18); // key-value pair

// make the Kinetic Container a dropzone
$stageContainer.droppable({
    drop:dragDrop,
});

// handle a drop into the Kinetic container
function dragDrop(e,ui){
        // get the drop point
        e.preventDefault();
        var x = parseInt(ui.offset.left-offsetX);
        var y = parseInt(ui.offset.top-offsetY);

        // get the drop payload (here the payload is the image)
        var element=ui.draggable;
        var data=element.data("url");
        var theImage=element.data("image");

        // create a new Kinetic.Image at the drop point
        // be sure to adjust for any border width (here border==1)
        var image = new Kinetic.Image({
            name:data,
            x:x,
            y:y,
            image:theImage,
            draggable: true
        });
        layer.add(image);
        layer.draw();

}

//Remove the current backgraund and add a new
function onReset() {
    background.remove();
    layer.add(background);
    layer.draw();
}

//Transform into image the current stage.
function onSave(){
    stage.toDataURL({
      callback: function(dataUrl) {
        window.open(dataUrl,'Screenshot','toolbar=1,scrollbars=1,location=1,statusbar=0,menubar=0,resizable=1,width=800,height=600');
      }
    });
}

//Change the sizeDraw depending of the image clicked.
function onSizeClick(size) {
    if(size == 'size1'){
        sizeDraw = 5;
    }
    else if(size == 'size2'){
        sizeDraw = 10;
    }
    else {
        sizeDraw = 20;
    }

}

}

Funciona bien en Firefox y Chrome pero no funciona en android y ios la parte del drag and drop, alguien sabe que es lo que hago mal?

PD: Se que el codigo es esta muy mal estructurado, es lo primero que hago en html y javascript xD