Hacer drag and drop con jQuery

Una de las primeras cosas que aprendí a hacer cuando me inicié con jQuery fue hacer un ejercicio de drag and drop.

Os dejo los pasos que necesitamos para que funcione:

1. Incluir las librerías js de jQuery

?

<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

2. Crear los divs que vamos a cambiar de posición

?

<div id="sortable">  <div class="drag">Item 1</div>  <div class="drag">Item 2</div>  <div class="drag">Item 3</div>  <div class="drag">Item 4</div>  <div class="drag">Item 5</div> </div>

3. Poner el código para que los divs puedan ejecutar el movimiento

?

<script>  $(function() {   $("#sortable").sortable({ // id del elemento padre sobre el que hacer drag and drop    revert: true, // activar pequeña animación al soltar    opacity: 0.5 // mostrar una sombra del elemento que estamos arrastrando   });  }); </script>

4. Añadir CSS para que los divs tengan mejor aspecto

?

<style>  .drag {   width: 300px;   cursor: move;   padding: 5px;   border: 1px #CCC solid;   margin: 5px;   border-radius: 5px;   background-color: #CCC;  } </style>