Programando PHP: HTML5 Drag Drop

En un único sentido:
<!DOCTYPE HTML>
<html lang="es">
<head>
    <meta charset="utf-8">
<style>
#area_foto {
    width:350px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

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

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("mi_foto");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Coloca la foto en el rectángulo:</p>

<div id="area_foto" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>

<img id="foto1" src="img/humphrey_bogart.jpg" draggable="true"
ondragstart="drag(event)" width="62" height="70">
<img id="foto2" src="img/ingrid_bergman.jpg" draggable="true"
ondragstart="drag(event)" width="62" height="70">
<img id="foto3" src="img/claude_rains.jpg" draggable="true"
ondragstart="drag(event)" width="62" height="70">

</body>
</html>
-----------------------------------------------------------------------------------------
En Ambos sentidos:

<!DOCTYPE HTML>
<html>
<head>
<style>
#area_origen, #area_descarga {
    float:left;
    width:300px;
    height:75px;
    margin:10px;
    padding:10px;
    border:1px solid #aaaaaa;
}
</style>
<script>
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");
    // console.log("DATA:"+data);
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="area_origen" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img/humphrey_bogart.jpg" draggable="true" ondragstart="drag(event)" id="foto1" width="62" height="70">
<img src="img/ingrid_bergman.jpg" draggable="true" ondragstart="drag(event)" id="foto2" width="62" height="70">
<img src="img/claude_rains.jpg" draggable="true" ondragstart="drag(event)" id="foto3" width="62" height="70">
</div>

<div id="area_descarga" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

------------------------------------------------------------------------------------
Ejemplo de Drag and Drop con JQuery

<!DOCTYPE HTML>
<html lang="es">
<head>
    <title>Drag an drop con JQuery</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/estilos.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="js/ejemplo3.js"></script>
</head>
<body>
Casablanca:
<div id="div_casa" class="zona_descarga" style="width:500px;height:100px;border:1px solid #000;"></div>
<hr>
Lo que el viento se llevó:
<div id="div_viento" class="zona_descarga" style="width:500px;height:100px;border:1px solid #000;"></div>

<img id="drag1" class="esCasa" src="img/humphrey_bogart.jpg" draggable="true">
<img id="drag2" class="esCasa" src="img/ingrid_bergman.jpg" draggable="true">
<img id="drag3" class="esCasa" src="img/claude_rains.jpg" draggable="true">
<img id="drag4" class="esViento" src="img/clark_gable.jpg" draggable="true">
</body>
</html>

ejemplo3.js:
$(function(){
var cont_errores = 0;
$(".zona_descarga").on("dragover",function(e){
    e.preventDefault();
   });

$(".esCasa").on("dragstart",function(e){
    e.originalEvent.dataTransfer.setData("id_casa",e.target.id);
});
$(".esViento").on("dragstart",function(e){
    e.originalEvent.dataTransfer.setData("id_viento",e.target.id);
});

$(".zona_descarga").on("drop",function(e){
    e.preventDefault();
    // $(this)[0].id tiene el id del elemento q se arrastra
    id_final = $(this)[0].id.replace("div_", "");
    var data = e.originalEvent.dataTransfer.getData("id_"+id_final);
    if (data == "") {
           cont_errores++;
           alert("Error número "+cont_errores);
    }
    else {
        e.target.appendChild(document.getElementById(data));
    }
});
});

Programando PHP

ccc

HTML5 Drag and Drop: Files

HTML5 Drag and Drop