Hightlight Droppable area based on element offset with jQuery UI Droppable API

[Lokesh]

Is it possible to decide the droppable area on the fly based on target element offset() in drop container?

In general elements gets stacked after drag & drop.

Demo Plunk - http://plnkr.co/edit/n4uDXfKOMUGz3ffRNCnL?p=preview

Refer Drop.js file in the plunk to view the code written for drop functionality.

   $(context.destination).droppable({
      accept: ".form-element-link",
      drop: function(event, ui) {
          context.onDrop(event, ui);
      },
      over: function(event, ui) {
          
      },
      out: function(event, ui) {
          
      }
  });

Elements get stacked when dropped in container and to highlight the drop area, a horizontal bar with dotted blue color is shown to show the element stacked position.

Expected End result :

Actual ask is to highlight the placeholder with blue bar on right side of existing field set. This way 2-column layout will be achieved where fields will be placed adjacent to each other. Like this -

Is it possible to achieve the desired results with JQuery droppable() API? If yes, then please suggest the logical route to make it happen.

Any help will be appreciated.