How to drop Draggable element only on Droppable Ivs and not drop to the rest of the screen

Asked

Viewed 55 times

0

Talk, guys, I’m having a little problem here, I stopped using the **Drag and Drop** HTML5 native because it does not support Android browsers, so I started using the Jqueryui.
I have some charts from Google Chart Draggable who should be 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 interlink the graphs between the DIV droppable, for example, the draggable when dragged from droppable1 to the droppable2 the draggable2 comes out of droppable2 and goes to the place of draggable.

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

Follow Functional Example of my Current Scenario: https://codepen.io/jo-o-santos/pen/zyaXLK

javascript jquery-ui resize ui-draggable

1 answer

1


Browser other questions tagged javascript jquery-ui resize ui-draggable

You are not signed in. Login or sign up in order to post.