jquery dropping position

jquery dropping position

I have a jquery drag and drop that works quite well with only one thing to complain about: when the dragable object is larger than to drop zone, I would like the object to be dropable when the mouse cursor hovers the drop zone. As it is now, it feels like the object becomes dropable when its center enters the drop zone. For a large object with a greater width, that means the object must be dragged a bit more to the left so as to have its center enter the drop zone. And this can really be an issue if the object draggable area is limited, preventing this extra dragging on the left.
Any way to have the object dropable when the mouse cursor enters the drop zone instead?


<style type="text/css">
.elearning_question_draggable {
  cursor:pointer;
}
.droppable-hover {
  outline: 2px dashed;
}
.no_style_elearning_question_dropped_answer {
  cursor:pointer;
  margin:2px;
}
.elearning_question_answer_field {
  border-width:0px 0px 1px 0px;
  border-style:solid;
}
</style>
<script type="text/javascript">

$(document).ready(function(){

  $(".elearning_question_draggable").draggable({
    helper: 'clone', // Drag a copy of the element
    ghosting: true, // Display the element in semi transparent fashion when dragging
    opacity: 0.5, // The transparency level of the dragged element
    cursorAt: { top: 10, left: 10 }, // Position the mouse cursor in the dragged element when starting to drag
    cursor: 'move', // Change the cursor shape when dragging
    revert: 'invalid', // Put back the dragged element if it could not be dropped
    containment: '.elearning_exercise_page' // Limit the area of dragging
  });

  $(".elearning_question_droppable").droppable({
    accept: '.elearning_question_draggable', // Specify what kind of element can be dropped
    hoverClass: 'droppable-hover', // Styling a droppable when hovering on it
    drop: // Handle a drop event
      function(ev, ui) {
           // Update the answer id and display
          $(this).find('input').attr("value", ui.draggable.attr("elearningAnswerId"));
              $(this).find('span.elearning_question_answer_field').html(ui.draggable.html());
          var participantAnswer = $(this).find('input').attr("value");
       }
  });