drag & drop using jquery?

Question

now I'm creating drag and drop widget, there are 3 questions as well as 3 answers. user should be able to fill only 2 answers only in any order and 3rd drop area should be disabled, the 3rd drop area can be anything in between 1 to 3 area.

After submit button is clicked the correct answers should be highlighted in Green & wrong in RED.

Please advise how to do in jquery

$(function(){
    $(".drop,").droppable();
    $(".drag").draggable({
        revert: 'invalid'
    });
});

HTML

            <div class="drag text-center"></div>
            <div class="drag text-center"></div>
            <div class="drag text-center"></div>

            <div class="drop text-center"></div>
            <div class="drop text-center"></div>
            <div class="drop text-center"></div>

Answer 1

fiddle wasn't accepting jquery UI, so I created a codepen for you.

http://codepen.io/zsawaf/pen/OWYgNg

I just have a listener for 'drop' and 'out' (built in methods for droppable). I am tracking the number of answers dropped, if they exceed the max, then I don't count them. If answers are dragged out, the dropped count decrements. As shown below:

var self = this;

// make questions droppable
$('.droppable').droppable({
  drop: function( event, ui ) {
    var $answer_dropped = $(this);

    self.dropped += 1;
    if (self.dropped <= self.max_allowed) {
      $answer_dropped.addClass('dropped');
    }
    else {
      self.dropped = self.max_allowed; // cap out at max
    }
  },
  out: function( event, ui ) {
    var $answer_out = $(this);

    if ($answer_out.hasClass('dropped')) {
      self.dropped -= 1;
      $answer_out.removeClass('dropped');
    }
  }
});

I'm sure you can figure out the logic from now.

Let me know if you have any questions.