Expanding the jQuery Sortable Dropzone

Question

I am using jQuery sortable to create areas that list items can be dropped onto from a source list. In my destination zones, I have a ul with a class that acts as the dropzone. However, this ul is within a bootstrap panel-body and further narrows down where the item can be dropped.

My goal is to figure out how to drop the item anywhere on the panel and have it be appended to the end of the ul within the panel-body .

This is what my source / destination look like:

When I drag an item from the source to the destination (Export Fields) you will see below that the placeholder is shown within the panel body.

As it stands, everything is functioning but I am trying to make it a little more user friendly so an item from the left can be dropped on any panel on the right and it will automatically append it to the end of the ul without the user having to drag the li to the specific ul dropzone.

Any tips on how I can achieve this?

Here is a fiddle of my setup: https://jsfiddle.net/tdhkzsfm/

Answer 1

    tolerance: 'pointer',

This option will help you a little bit..It won't require 50% intersection with your other list element. It's not the full answer however. I suspect that you will need to change your connectWith parameter as well to be the panel itself.