JQuery UI : Drop long element at the cursor location instead of the middle of the element

I think what you’re looking for is tolerance. I would probably suggest using "pointer" as this will use the mouse cursor as your “overlap” point.

http://jqueryui.com/demos/droppable/

$('[id^="cell-"]').each(function(index) {
  $(this).droppable({
  accept: ".cartridge",
  hoverClass: "cell-highlght",
    tolerance: "pointer",
  drop: function( event, ui ) {
    $( this ).addClass( "cell-dropped" );
  }
  });
});