application.js

$(document).ready(function() {
    var total_price = 0;
    $(".item").draggable({
        helper: "clone"
    });
    $("#grocery_list").droppable({
        drop:  function(event, ui) {
            var item = ui.helper.html();
            $("#grocery_list").append("<tr class='item'>"+item+"</tr>");
            var price = parseFloat(ui.helper[0].cells[1].firstChild.data);
            total_price = (total_price + price);
            var beforeTotal = parseInt($("#total_cost"));
            if (total_price > 0) { 
                $("#total_cost").html(total_price.toFixed(2));
            }
        }
    });
});

index.html

<div class="row">
  <div class="span6">
    <h2>Store List</h2>
    <table id="store_list">
      <thead>
        <tr>
          <th>Item Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr class="item">
          <td class="item_name">Apple</td>
          <td class="item_price">0.69</td>
        </tr>
        <tr class="item">
          <td class="item_name">Tofu</td>
          <td class="item_price">3.49</td>
        </tr>
        <tr class="item">
          <td class="item_name">Granola</td>
          <td class="item_price">4.55</td>
        </tr>
        <tr class="item">
          <td class="item_name">Flatbread</td>
          <td class="item_price">6.21</td>
        </td>
        <tr class="item">
          <td class="item_name">Zucchini</td>
          <td class="item_price">1.22</td>
        </td>
        <tr class="item">
          <td class="item_name">Organic beef</td>
          <td class="item_price">12.99</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="span6">
    <h2>My Grocery List</h2>
    <table id="grocery_list">
      <thead>
        <tr>
          <th>Item Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
      <tfoot>
        <tr>
          <td>TOTAL:</td>
          <td id="total_cost"></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

style.css

body {
  font-family: sans-serif;
}

.row {
  margin-left: -20px;
}

.span6 {
  padding-left: 10px;
  margin-left: 10px;
  max-width: 50%;
  float: left;
  height: 100%;
}

.span6:last-child {
  border-left: 1px solid #ddd;
}

td, th {
  padding: 4px;
}

tbody tr:nth-child(even) {
  background-color: #cdcdcd;
}

tbody tr:nth-child(odd) {
  background-color: #bcbcbc;
}

table {
  background-color: #eee;
  border: 1px solid #bbb; 
}

table#grocery_list tfoot {
  color: red;
}

.item, .item * {
  cursor: pointer;
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  user-select: none;
}