<!DOCTYPE HTML>
<html>
<head>
<title>Arrastrar y soltar</title>
</head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
/*estilo general: resetear*/
* { margin: 0 auto; padding: 0; }
/*estilo de contenedores*/
#cont0 { width: 90%; height: 300px; }
#cont1 { width: 90%; height: 800px; background-color:lime; overflow: auto; }
#cont2 { width: 90%; height: 800px; background-color:skyblue; overflow: auto; }
</style>
<script type="text/javascript">
//Recoger elemento arrastrable//
function evdragstart(ev,el) { //ev= el evento, el=elemento arrastrado.
cont1=el.parentNode; //guardamos el elemento padre del elemento en una variable.
ev.dataTransfer.setData("text",ev.target.id); //guardamos datos del elemento.
$('html,body').animate/*scroll que se movera en tu caso a lo mejor es html,body*/({
scrollTop: $("#aqui").offset().top/*Donde se movera*/
// scrollTop: 0 para mover hasta arriba
}, 2000/*tiempo que se movera en ml*/);
}
//mientras se arrastra:
function evdragover (ev) { //ev=el evento.
ev.preventDefault(); //quitar comportamiento por defecto.
}
//Al soltar el elemento arrastrado
function evdrop(ev,el) { //ev=el evento; el=receptor de soltado
ev.stopPropagation(); //impedir otras acciones
ev.preventDefault(); //quitar comportamiento por defecto
var data=ev.dataTransfer.getData("text"); //recogemos datos del elemento
mielem=ev.target.appendChild(document.getElementBy Id(data)); //obtenemos el elemento arrastrado
cont1.appendChild(mielem); //ponemos el elemento arrastrado en el mismo sitio donde estaba.
mielem2=mielem.cloneNode(true); //creamos una copia del elemento arrastrado.
mielem2.setAttribute("draggable","false"); //impedimos que el nuevo elemento pueda volver a arrastrarse
el.appendChild(mielem2); //colocamos la copia en el receptor de soltado
}
</script>
<body>
<div id="cont0">
<!--contenedor de salida-->
<div id="cont1" >
<!-- Cada elemento está dentro de un contenedor, (div o span), lo cual permitirá
recuperarlo en su sitio después de ser arrastrado.-->
<div><p draggable="true" ondragstart="evdragstart(event,this)" id="e1">Arrastrame</p></div>
<span><img src="objetos/espana.gif" alt="españa"
draggable="true" ondragstart="evdragstart(event,this)" id="e4"/></span>
<span><img src="objetos/europa.gif" alt="europa"
draggable="true" ondragstart="evdragstart(event,this)" id="e5"/></span>
<span><img src="objetos/italia.gif" alt="italia"
draggable="true" ondragstart="evdragstart(event,this)" id="e6"/></span>
</div>
<!--receptor de soltado -->
<div id="cont2" ondragover="evdragover(event)" ondrop="evdrop(event,this)">
<div id="aqui"></div><!--Aqui se movera el scroll-->
</div>
</div>
</body>