I cannot access the values in my draggable element once it has been dropped.

[freejacque]

I need to get the charges from a card once it has been dropped on the target. I put in an event listener for drop but the draggable object data is not accessible.

var $card = $('.card')
var $set;
var $box = $('.box');
var $that;

function seedAtomicNumbers(){
    for(i=1; i <= 20; i++){
      atomicNumbers.push(i);
    };
    for(i=26; i <= 36; i++){
      atomicNumbers.push(i);
    };
  };

  function getElements(){
    $moleculeBox = $('#molecule-box');
    $('ul#deck').html("");
    clearTimer();
    for(var i=0; i < 15; i++){
      atomicNumber = atomicNumbers[Math.floor(Math.random() * atomicNumbers.length)];
      element = elements[parseInt(atomicNumber, 10)];
      var card = new Card(element);
      card.init();

    }
    setTimer();
  };

  function Card(element){
    this.element = element;
  }

  Card.prototype = {
    template: _.template($("#card-template").html()),

    render: function(){
      console.log(' view:render', this);
      var temp = this.template({element: this.element});
      this.$element = $(temp);
      this.$element.draggable({
        snap: '.box',
        snapMode: 'inner',
      });
      return this;
    },

    init: function(){
      var view = this;
      if (!this.$element){
        view.render();
        $("#deck").append(view.$element);
      }
    },
  };

  function setTimer(){
    set();
    console.log(set);
  };

  function count(){
    $timer = $('#interval');
    $counter++;
    $timer.html($counter);
  };

  function set(){
    $set = setInterval(count, 1000);
  };

  function clearTimer(){
    clearInterval($set);
    $counter = 0;
  };

  $box.droppable({
    drop: function(event, ui){
      console.log('dropped');
      console.dir(ui.draggable);
      $that = ui.draggable;
      $box.css({visibility: 'hidden'});
    }
  });

  function addCharges(){
    console.log($that);
    return $that;
    var $chargesStr = $that.find('div.charges').find('span')[0].innerText;
    $charge = $.parseInt($chargesStr);
    return $charge;
    $chargeEq.html($charge).appendTo($body);
  };'''

$box.on('drop', addCharges);

[phlco]

Formatting issue: The three backticks need to be on their own line and have three at the end as well.

Did you go through the droppable/draggable api documentation? http://api.jqueryui.com/droppable/#event-drop

What properties are on the event object? There should be something like event.target

[freejacque]

I don't want to see what the droppable is, I need to see the draggable item. Where would the event.target be?

[phlco]

What is available in the drop callback?

$("#thing").droppable(function(event){
  // what's available to you in the event object?
  console.log(event);
});