How to drop draggable element only on divs Droppable and not drop on the rest of the screen

Guys talk, I'm with a little problem here, I stopped using the native HTML5 **Drag and Drop** because the same does not support Android browsers, I then used the jQueryUI.
I have some charts from Google Chart Draggable that should get stuck in divs Droppable, in the following example "DropZone1 and DropZone2":

HTML :

<div id="draggable" class="ui-widget-content">
</div>

<div id="draggable2" class="ui-widget-content">
</div>

<div id="droppable1" class="droppable ui-widget-header">
  <p>Drop Zone 1</p>
</div>

<div id="droppable2" class="droppable ui-widget-header">
  <p>Drop Zone 2</p>
</div>

JS:

$( function() {
    $( "#draggable, #draggable2" ).draggable({

      });
    $( ".droppable" ).droppable({
      accept: '#draggable, #draggable2', 
        drop :function(event, ui ) {
          var largura =  $(this).css("width");
          var altura =  $(this).css("height");
          var esquerda =  $(this).offset().left;
          var topo =  $(this).offset().top;
          $(ui.draggable).css("width", largura);
          $(ui.draggable).css("height", altura);
          $(ui.draggable).css("left", esquerda); 
          $(ui.draggable).css("top", topo); 
          drawBasic();
          drawChart();
      }
    }).resizable({
      resize: function( event, ui ) {
          var largura =  $(this).css("width");
          var altura =  $(this).css("height");
          var esquerda =  $(this).offset().left;
          var topo =  $(this).offset().top;
          $(ui.draggable).css("width", largura);
          $(ui.draggable).css("height", altura);
          $(ui.draggable).css("left", esquerda); 
          $(ui.draggable).css("top", topo); 
          drawBasic();
          drawChart();
      }
    });
  } );



google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawBasic() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');

      data.addRows([
        [{v: [8, 0, 0], f: '8 am'}, 1],
        [{v: [9, 0, 0], f: '9 am'}, 2],
        [{v: [10, 0, 0], f:'10 am'}, 3],
        [{v: [11, 0, 0], f: '11 am'}, 4],
        [{v: [12, 0, 0], f: '12 pm'}, 5],
        [{v: [13, 0, 0], f: '1 pm'}, 6],
        [{v: [14, 0, 0], f: '2 pm'}, 7],
        [{v: [15, 0, 0], f: '3 pm'}, 8],
        [{v: [16, 0, 0], f: '4 pm'}, 9],
        [{v: [17, 0, 0], f: '5 pm'}, 10],
      ]);

      var options = {
        title: 'Motivation Level Throughout the Day',
        hAxis: {
          title: 'Time of Day',
          format: 'h:mm a',
          viewWindow: {
            min: [7, 30, 0],
            max: [17, 30, 0]
          }
        },
        vAxis: {
          title: 'Rating (scale of 1-10)'
        }
      };

      var chart = new google.visualization.ColumnChart(
        document.getElementById('draggable'));

      chart.draw(data, options);
    }
function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('draggable2'));

        chart.draw(data, options);
      } 

I would like to be able to interleave the graphs between DIV droppable, for example, draggable when dragged from droppable1 to droppable2, draggable2 leaves droppable2 and goes instead of draggable.

The result I want is something like presented in this example: https://codepen.io/jo-o-santos/pen/aPKgoQ

Follows functional example of my current scenario: https://codepen.io/jo-o-santos/pen/zyaXLK