Make a draggable DIV (jQueryUI) on a table (dataTable)

I would like to know how I can make a draggable div (.draggable), that when dragging it overcomes a div that contains a table, I have something like that in my code (it's too extensive to put everything)

HTML:

<div id="contenedorDivs">
   <div id="divArrastable"> Texto de pruebas! </div>
   <div id="divContenedorTabla">
      <table id="tablaPrueba">
         <thread><tr><th>Label01</th></tr></thread>
         <tbody><tr><td>Text01</td></tr></tbody>
      </table>
   </div>
</div>

JS:

 $(document).ready(function () {
    $("divArrastable").draggable();
    var tabla = $('#tablaPrueba').dataTable({
    "aoColumns": [{ "sWidth": "30%" },{ "sWidth": "30%" },{ "sWidth": "40%"}],
    "aaSorting": [[_ORDEN_LISTA, "asc"]],
    "bLengthChange": false,
    "iDisplayLength": _MAXIMO_REGISTROS_LISTA,
    "bFilter": true,
    "bAutoWidth": false,
    "sDom": 'lrtip'
}

and the "divArrastable" when dragging it over the "divContanedorTabla" it passes behind it, and not over it as I would like to