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

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.

      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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.