Sortable connected lists with example - how to fix placeholder position?

Sortable connected lists with example - how to fix placeholder position?

My test page, of which a complete working example is attached, contains 4 connected lists of boxes that can be moved around.  There are 2 rows on the page.

Row 1 - contains one wide list

Row 2 - contains 3 columns of narrower lists

When I try to drag the bottom-most box (Box B) in Row 1 to the top of the middle column in Row 2 (above Box 4), the placeholder (a gray-dashed rectangle) doesn't appear where I'd expect.

How can I make the placeholder behave correctly / intuitively?

To run the working example, do the following:

1. Unzip the attached file, TestDragAndDrop.zip, to any folder
2. Go to that folder and bring up TestDragAndDropPhaseThree.html

Thanks!  This problem is driving me buggy.