title: Drag drop into google visualisation datatable array
body: <p>I'm beginner to web developing and coding so sorry if I ask trivial question...</p>
  
  <p>I want to create a job scheudle tool with timeline so I find on net this example <code>almende.github.io/chap-links-library/js/timeline/examples/example15_mobile.html</code> based on google visualisation api.</p>
  
  <p>All is works fine now but I create a table with two column:</p>
  
  <pre><code>&lt;table width="1300" height="100%" border="1" cellpadding="1" cellspacing="1"&gt;
    &lt;tr&gt;
      &lt;th width="250" align="left" valign="top" scope="row"&gt;&lt;div id="jobs"&gt;&lt;p&gt;JOBS&lt;/p&gt;
          &lt;div class="timeline-event timeline-event-range ui-widget ui-state-default available" style="position: absolute; width: 171.66209509852223px;"&gt;&lt;div class="timeline-event-content"&gt;available&lt;/div&gt;&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
          &lt;div class="timeline-event timeline-event-range ui-widget ui-state-default unavailable" style="position: absolute; width: 222.4193548387097px;"&gt;&lt;div class="timeline-event-content"&gt;unavailable&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;/th&gt;
      &lt;td width="850" align="left" valign="top"&gt;&lt;div id="mytimeline"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
  
  &lt;/table&gt;
  </code></pre>
  
  <p>In 2nd column is the code of example div ID timeline and in 1st column is two div object and I want to make it draggable to the timeline so draggable on googl visualisation api array</p>
  
  <p>I try with jquery:</p>
  
  <pre><code>$(function() {
      $( "div.available" ).draggable();
    });
  and yes its draggable but HOW I can add it to the dataTable
  
  // Called when the Visualization API is loaded.
      function drawVisualization() {
          // Create and populate a data table.
          data = new google.visualization.DataTable();
          data.addColumn('datetime', 'start');
          data.addColumn('datetime', 'end');
          data.addColumn('string', 'content');
          data.addColumn('string', 'group');
          data.addColumn('string', 'className');
  
          // create some random data
          var names = ["Algie", "Barney", "Chris", "Pera", "Mile"];
          ime = names;
          for (var n = 0, len = names.length; n &lt; len; n++) {
              var name = names[n];
              var now = new Date();
              var end = new Date(now.getTime() - 12 * 60 * 60 * 1000);
              for (var i = 0; i &lt; 5; i++) {
                  var start = new Date(end.getTime() + Math.round(Math.random() * 5) * 60 * 60*1000);
                  ekstra = new Date();
                  var end = new Date(start.getTime() + Math.round(4 + Math.random() * 5) * 60 * 60 * 1000);
  
                  var r = Math.round(Math.random() * 2);
                  var availability = (r === 0 ? "available" : (r === 1 ? "unavailable" : "maybe"));
                  var group = availability.toLowerCase();
                  var content = availability;
                  data.addRow([start, end, content, name, group]);
  
              }
          }
          var kraj = new Date(now.getTime() + 12 * 60 * 60 * 2000);
              data.addRows([
      [ ekstra,  kraj, 'Job ID#0001', 'Worker Name','av' ],
      [new Date(0,0,0,14,0,0),  new Date(0,0,0,15,30,0), 'Job ID#0001', 'Worker Name','av' ]
      ]);     
  
          // specify options
          var options = {
              width:  "100%",
              height: "99%",
              layout: "box",
              axisOnTop: true,
              eventMargin: 10,  // minimal margin between events
              eventMarginAxis: 0, // minimal margin beteen events and the axis
              editable: true,
              showNavigation: true
          };
  
          // Instantiate our timeline object.
          timeline = new links.Timeline(document.getElementById('mytimeline'));
  
          // register event listeners
          google.visualization.events.addListener(timeline, 'edit', onEdit);
  
          // Draw our timeline with the created data and options
          timeline.draw(data, options);
  
          // Set a customized visible range
          var start = new Date(now.getTime() - 4 * 60 * 60 * 1100);
          var end = new Date(now.getTime() + 8 * 60 * 60 * 1000);
          timeline.setVisibleChartRange(start, end);
      }
  
      function getRandomName() {
          var names = ["Algie", "Barney", "Grant", "Mick", "Langdon"];
  
          var r = Math.round(Math.random() * (names.length - 1));
          return names[r];
      }
  
      function getSelectedRow() {
          var row = undefined;
          var sel = timeline.getSelection();
          if (sel.length) {
              if (sel[0].row != undefined) {
                  row = sel[0].row;
              }
          }
          return row;
      }
  
      function strip(html)
      {
          var tmp = document.createElement("DIV");
          tmp.innerHTML = html;
          return tmp.textContent||tmp.innerText;
      }
  
      // Make a callback function for the select event
      var onEdit = function (event) {
          var row = getSelectedRow();
          var content = data.getValue(row, 2);
          var availability = strip(content);
          var newAvailability = prompt("Enter status\n\n" +
                  "Choose from: Available, Unavailable, Maybe", availability);
          if (newAvailability != undefined) {
              var newContent = newAvailability;
              data.setValue(row, 2, newContent);
              data.setValue(row, 4, newAvailability.toLowerCase());
              timeline.draw(data);
          }
      };
  
      var onNew = function () {
          alert("Clicking this NEW button should open a popup window where " +
                  "a new status event can be created.\n\n" +
                  "Apperently this is not yet implemented...");
      };
  </code></pre>
  
  <p>So, HOW I can add it to the data row when I drag it to the timeline? MY CODE on jsbin: <a href="http://jsbin.com/oLaqoToH/2/edit" rel="nofollow">http://jsbin.com/oLaqoToH/2/edit</a></p>
  
  <p>So I want to drag div object from 1st column to 2nd column (timeline) and add it to the data array. </p>
  
  <p>Timeline is scrollable but with this function:</p>
  
  <pre><code>timeline.getDataRange();
  
  Object {min: Sun Dec 31 1899 14:00:00 GMT+0100 (Central Europe Standard Time), max: Fri Dec 13 2013 15:07:22 GMT+0100 (Central Europe Standard Time)}
  </code></pre>
  
  <p>so this Is date range which I see on timeline... and with function:
  <code>$('#mytimeline').width();</code> I get the pixel of timeline so now i can calculate 1pixel = time?</p>
  
  <p>Now when I drag div object from 1st column to 2nd column (#mytimeline) how I can add with drag divObject into timeline?</p>
  
  <p>please help and sorry for my english, its bad , but i'm learning hard</p>