jQuery UI Sortable not Working With Metabox

Question

I am having a LOT of trouble with this - my ul li's aren't going anywhere. I have looked at most of the 'duplicates' of this, but cannot for the life of me get it to work. And my code probably isn't the best, so please feel free to comment/answer (as long as the answer is an actual answer as well) better ways of doing things.

Registering of scripts:

function add_admin_scripts( $hook ) {
  global $post;

  wp_register_script( 'sectioned_page_script', get_stylesheet_directory_uri() . '/js/sectioned_page.js' );

  if ( $hook == 'post-new.php' || $hook == 'post.php' ) {
    if ( 'sectioned_page' === $post->post_type ) {
      wp_enqueue_script( 'jquery' );
      //wp_enqueue_script( 'jquery-ui-sortable' );
      wp_enqueue_script( 'sectioned_page_script' );
    }
  }
}
add_action( 'admin_enqueue_scripts', 'add_admin_scripts', 10, 1 );

Meta box building:

function sectioned_page_meta_box_cb( $post ) {
  wp_nonce_field( basename( __FILE__ ),  $nonce );
  ?>
    <p>
      <label><?php _e('Sections:'); ?></label>
      <ul class="sortable">
        <li>2345678901</li>
        <li>1234567890</li>
        <li>3456789012</li>
      </ul>
    </p>
  <?php
}

And the actual script:

jQuery( document ).ready( function( $ ) {    
    $( '.sortable' ).sortable({
        opacity: 0.6,
        revert: true,
        cursor: 'move',
        handle: '.hndle',
        placeholder: {
            element: function( currentItem ) {
                return $("<li style='background:#E7E8AD'>&nbsp;</li>")[0];
            },
            update: function( container, p ) {
                return;
            }
        }
    });
    $( '.sortable' ).disableSelection();
    alert( "Finished!" );
});

function addSection() {
    // TODO - add to list
    alert( "Hello!" );
}

Thanks for the help, Lyphiix

Answer 1

So, after an annoyingly long struggle, I discovered that I needed to have the script enqueued/registered with no dependencies. So in the end, to make it work, I needed this:

function add_admin_scripts( $hook ) {
  global $post;

  wp_register_script( 'sectioned_page_script', get_stylesheet_directory_uri() . '/js/sectioned_page.js' );

  if ( $hook == 'post-new.php' || $hook == 'post.php' ) {
    if ( 'sectioned_page' === $post->post_type ) {
      wp_enqueue_script( 'sectioned_page_script' );
    }
  }
}
add_action( 'admin_enqueue_scripts', 'add_admin_scripts', 10, 1 );