JQuery UI Sortable strange placeholder behaviour
<p>I have the following JSFiddle:</p>

<blockquote>
  <p><a href="https://jsfiddle.net/353fa42p/4/" rel="nofollow">https://jsfiddle.net/353fa42p/4/</a></p>
</blockquote>

<p>Below is simply an excerpt from the JS file:</p>

<pre><code>$( document ).ready(function() {

    $(".box-item-scroll-contents").sortable({
        appendTo: "body",
        connectWith: ".item-objects-area,.box-item-scroll-contents",
        handle: ".drag",
        items: ".box-item,.box-item-object"
    }).disableSelection();

    $(".item-objects-area").sortable({
        appendTo: "body",
        connectWith: ".box-item-scroll-contents,.item-objects-area",
        handle: ".drag-inner",
        items: ".box-item-object,.box-item"
    }).disableSelection();

    $(".open").on("click", function(){
        var objArea = $(this).closest(".box-item").find(".item-objects-area");
        if( objArea.is(":visible") ){
            objArea.hide();
        }
        else{
            objArea.show();
        }
    });
});
</code></pre>

<p>If you drag 'item 4' up the left-hand side of the list the placeholder does not appear. Now, if you reset the positions, then drag 'item 4' up the right-hand side of the list, the placeholder shows ok !
Now, if you then rest the positions again and open 'item 5' up, then drag 'item 4' up the list, the placeholder works ok no matter what side of the list it is dragged! Any ideas as to what is causing this erratic behaviour?</p>

<p>Note: there will be more than one 'box-item-scroll-area' block on the page, so the items in the 'box-item-scroll-area' and 'item-objects-area' will need to be interchangable between themselves and between those list in the other 'box-item-scroll-area' blocks on the page.</p>