<?php
if ( class_exists( 'WP_Customize_Control' ) ) :
class Howcan_Sortable_Control extends WP_Customize_Control {
    public $type = 'sortable';

    public function enqueue() {
        wp_enqueue_script( 'jquery-ui-sortable' );
        wp_enqueue_script( 'howcan-sortable-control', get_template_directory_uri() . '/inc/customizer/sortable-control.js', array( 'jquery', 'jquery-ui-sortable' ), false, true );
        wp_enqueue_style( 'howcan-sortable-control', get_template_directory_uri() . '/inc/customizer/sortable-control.css' );
    }

    public function render_content() {
        if ( empty( $this->choices ) ) return; ?>

        <label>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <ul class="howcan-sortable-list">
                <?php foreach ( $this->choices as $value => $label ) : ?>
                    <li class="howcan-sortable-item" data-value="<?php echo esc_attr( $value ); ?>">
                        <span class="dashicons dashicons-move"></span>
                        <?php echo esc_html( $label ); ?>
                    </li>
                <?php endforeach; ?>
            </ul>
            <input type="hidden" <?php $this->link(); ?> value="<?php echo esc_attr( implode( ',', array_keys( $this->choices ) ) ); ?>" />
        </label>
    <?php }
}
endif;