Done some digging and have reached the point where I need fresh eyes on this.

I have 2 connected sortable divs( #sortable1, #sortable2).

Any number of items populated in #sortable2 on page load need to be accessible to / included in the “toArray” method, but they, the items populated on-load, can not be moved/draggable. In essence, preventing them from being dragged to #sortable1.

The items populated in #sortable1, need to behave “normally” when dragged to #sortable2 and / or back.

So far the closest I’ve gotten to this the following, but it kills everything on page load.

The <li> below is from #sortable2.

1. <li id="1777" class="btn btn-default btn-xs btn-block pinned" style="width: 397px; height: 22px; position: absolute; z-index: 1000;"><span >Dinner for 2</span></li>
2. 
   
3. activate: function (event,ui) {
4. if (ui.item.class('pinned')) $(ui.sender).sortable('cancel');
5. }

Thank you for any insight.