jQuery Sortable Puzzler

Trying to figure out how to get jQuery UI to let me move two corresponding sortables in two separate lists simultaneously.

HTML

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<div class="navBar">
  <ul>
    <li id="nav1">1</li>
    <li id="nav2">2</li>
    <li id="nav3">3</li>
    <li id="nav4">4</li>
    <li id="nav5">5</li>
    <li id="nav6">6</li>
    <li id="nav7">7</li>
    <li id="nav8">8</li>
    <li id="nav9">9</li>
  </ul>
</div>
<div class="containerDiv" id="container">
  <div class="itemDiv" id="item1">1</div>
  <div class="itemDiv" id="item2">2</div>
  <div class="itemDiv" id="item3">3</div>
  <div class="itemDiv" id="item4">4</div>
  <div class="itemDiv" id="item5">5</div>
  <div class="itemDiv" id="item6">6</div>
  <div class="itemDiv" id="item7">7</div>
  <div class="itemDiv" id="item8">8</div>
  <div class="itemDiv" id="item9">9</div>
</div>
</body>
</html>

CSS

* {padding: 0px; margin: 0px; outline: 1px solid rgba(0,0,0,0.1);}

html {width: 100%; height: 100%;}

body {width: 100%; height: 100%;}

.containerDiv
{
  overflow-x: scroll;
  overflow-y: hidden;
  width: 400px;
  height: 300px;
  white-space: nowrap;
  float: left;
}

.itemDiv
{
  width: 100px;
  height: 250px;
  display: inline-block;
}

.navBar ul, .navBar li
{
  display: inline;
}

JavaScript

function makeSortable() {
  // Reset scroll position
  $(".containerDiv").scrollLeft(0);
  
  // When click nav li, scroll to related itemDiv
  $(".navBar li").click(function(event, ui){
    var tempId = "#" + $(this).attr("id").replace("nav","item");
    var tempLeft = ( $(this).attr("id").replace("nav","") - 1 ) * $(tempId).width();
    $(".containerDiv").scrollTo(tempId,1000, {easing: 'easeInOutBack'});
  });
  
  // Make containerDiv children sortable on X-axis
  $(".containerDiv").sortable({
    axis: "x"
  });
  
  // Make nav children sortable on x-axis
  $(".navBar").sortable({
    axis: "x",
    items: "li"
  });
  
  // Bind sorting of navBar li to itemDiv
  $(".navBar li").bind("mouseup", function(event,ui){
    var tempId = "#" + $(this).attr("id").replace("nav","item");
    $(tempId).trigger("sortupdate");
    alert(tempId);
  });
}

$(document).ready(function () {
  makeSortable();
});