This is a WordPress plugin that demonstrates custom collapsible sortable sections with Admin Page Framework.

admin-page-framework-demo-custom-sortable-sections.php

<?php
/**
 * Plugin Name: Admin Page Framework - Demo: Custom Sortable Sections
 * Description: Demonstrates custom sortable sections.
 * Version: 0.0.1
 * Author: Michael Uno
 */

namespace AdminPageFrameworkCustomSortableSections;

class Load {

    public function __construct() {
        add_action( 'plugins_loaded', array( $this, 'load' ) );
    }

    public function load() {
        if ( ! class_exists( 'AdminPageFramework' ) ) {
            return;
        }
        include( __DIR__ . '/AdminPage.php' );
        new AdminPage;
    }

}
new Load;

AdminPage.php

<?php

namespace AdminPageFrameworkCustomSortableSections;

class AdminPage extends \AdminPageFramework {

    public $sPageSlug = 'apf_custom_sortable_collapsible_sections';

    public function setUp() {

        $this->setRootMenuPage( 'Settings' );

        // Add the sub menus and the pages
        $this->addSubMenuItems(
            array(
                'title'     => 'Custom Sortable Sections',
                'page_slug' => $this->sPageSlug,
            )
        );

        $this->addInPageTabs(
            $this->sPageSlug, // page slug
            array(
                'tab_slug'  => 'general',    // avoid hyphen(dash), dots, and white spaces
                'title'     => 'General',
            ),
            array(
                'tab_slug'  => 'form',
                'title'     => 'Forms',
                'script'    => array(
                    'src'       => __DIR__ . '/custom-sortable-sections.js',
                    'in_footer' => true,
                ),
            ),
            array(
                'tab_slug'  => 'notification',
                'title'     => 'Notifications',
            )
        );

        add_filter( "options_{$this->oProp->sClassName}", array( $this, 'getDefaultOptionValues' ) );

    }

    public function getDefaultOptionValues( $aOptions ) {
        return $this->oUtil->uniteArrays( $aOptions, array(
            'root' => array(
                'child_1' => array(
                    'text' => 'hello',
                    'checkbox' => true,
                ),
                'child_2' => array(
                    'text' => 'this is a second child section.',
                    'radio' => 'b',
                ),
            ),
        ) );
    }

    /**
     * @callback add_action() do_{page slug}_{tab slug}
     */
    public function do_apf_custom_sortable_collapsible_sections_general() {
        echo "<h2>General</h2>"
            . "<p>This is a general tab.</p>";
    }

    /**
     * @callback add_action() load_{page slug}_{tab slug}
     */
    public function load_apf_custom_sortable_collapsible_sections_form() {

        $this->addSettingSections(
            $this->sPageSlug, // the target page slug
            array(
                'section_id'        => 'root',
                'title'             => 'Root',
                'collapsible'       => array(
                    'toggle_all_button' => 'top-right',
                ),
                'class'             => 'custom-sortable-sections',
                'content'           => $this->___getChildSections(),
            )
        );
        $this->addSettingFields(
            array( 'root', 'child_1' ), // the target section ID - pass dimensional keys of the section
            array(
                'field_id'      => 'text',
                'title'         => 'Text',
                'type'          => 'text',
            ),
            array(
                'field_id'      => 'checkbox',
                'title'         => 'Checkbox',
                'type'          => 'checkbox',
                'label'         => 'Check this.',
            )
        );

        $this->addSettingFields(
            array( 'root', 'child_2' ), // the target section ID - pass dimensional keys of the section
            array(
                'field_id'      => 'text',
                'title'         => 'Text',
                'type'          => 'text',
            ),
            array(
                'field_id'      => 'radio',
                'title'         => 'Radio Box',
                'type'          => 'radio',
                'label'         => array(
                    'a' => 'Apple',
                    'b' => 'Banana',
                    'c' => 'Cherry',
                ),
            )
        );

    }
        private function ___getChildSections() {
            $_aChildSections = array(
                'child_1' => array(
                    'section_id'    => 'child_1',
                    'title'         => 'Child 1',
                    'collapsible'   => true,
                ),
                'child_2' => array(
                    'section_id'    => 'child_2',
                    'title'         => 'Child 2',
                    'collapsible'   => true,
                ),
            );
            $_aSavedOptions = $this->getValue();
            if ( ! isset( $_aSavedOptions[ 'root' ] ) ) {
                return array_values( $_aChildSections );    // convert to a linear array
            }
            // Sort
            $_aSorted = array();
            foreach( $_aSavedOptions[ 'root' ] as $_sChildID => $_aChild ) {
                $_aSorted[] = $this->oUtil->getElement( $_aChildSections, array( $_sChildID ) );
            }
            return $_aSorted;
        }


    public function do_apf_custom_sortable_collapsible_sections_form() {
        submit_button( 'Save' );
        echo "<h3>Saved Options</h3>"
             . "<div>"
                 . \AdminPageFramework_Debug::get( $this->getValue() ) // or \AdminPageFramework_Debug::get( get_option( $this->oProp->sOptionKey ) )
             . "</div>";
    }


    /**
     * @callback add_action() do_{page slug}_{tab slug}
     */
    public function do_apf_custom_sortable_collapsible_sections_notification() {
        echo "<h2>Notifications</h2>"
            . "<p>This is a notification tab.</p>";
    }

}

custom-sortable-sections.js

(function($) {
    $( document ).ready( function() {
        $( '.custom-sortable-sections > table > tbody > tr > td > div' ).sortable({
            items: '> .admin-page-framework-sectionset',
            handle: '.admin-page-framework-collapsible-title',
        });
    });
}( jQuery ));