title: Sortable jQuery drag div into td
body: <p>In my project I'm trying to do a sortable table.
  I tried much, but no solution was found.</p>
  
  <p>Question 1: I can't drag a div to an empty td.
  Question 2: I try to get data from a data attribute while dragging. (this) wont work...</p>
  
  <p>my JSfiddle : <a href="http://jsfiddle.net/aq98v/6/" rel="nofollow">http://jsfiddle.net/aq98v/6/</a></p>
  
  <p>here is the code below:</p>
  
  <p>Javascript:</p>
  
  <pre><code>$(function(){   
      $("#dropable").sortable({
          items : ".drag",
          start: function() {
              displayValue(this);
          },
          stop: function() {
              hideValue();
          },
          receive: function() {
              dropped(this);
          }
      });
  });
  
  function toggleNumbers(e) {
      var time = $(e).data("time");
      var visitor = $(e).data("visitor");
      $(".lol").html("selected time ="+time+" selected visitor ="+visitor);
  }
  
  function hideValue() {
      $(".lol").html("Reboot");
  }
  
  function dropped(e) {
      var time = $(e).data("time");
      var visitor = $(e).data("visitor");
      $(".lol").html("Success Dropped!!! time ="+time+" And visitor ="+visitor);
  }
  </code></pre>
  
  <p>html is very long in JSfiddle. i do a short one here.</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
           &lt;tr&gt;&lt;th class="col-lg-1"&gt;Monday&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="dropable"&gt;
          &lt;tr class="droping"&gt;
              &lt;td&gt;
                  &lt;div class="drag" data-time="09:00" data-visitor="12"&gt;
                      &lt;span class="time"&gt;09:00&lt;/span&gt;
                      &lt;span class="visitor"&gt;12&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Thank you for responding!</p>