Official example "Shoping Cart" is not worked with .draggable option "connectToSortable"!

Official example "Shoping Cart" is not worked with .draggable option "connectToSortable"!

I found that Official example "Shoping Cart" not firing using connectToSortable option.


My code present here:


  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  6.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
  7. </head>
  8. <body>
  9.     <style type="text/css">
  10.         h1
  11.         {
  12.             padding: .2em;
  13.             margin: 0;
  14.         }
  15.         #products
  16.         {
  17.             float: left;
  18.             width: 500px;
  19.             margin-right: 2em;
  20.         }
  21.         #cart
  22.         {
  23.             width: 200px;
  24.             float: left;
  25.         }
  26.         /* style the list to maximize the droppable hitarea */
  27.         #cart ol
  28.         {
  29.             margin: 0;
  30.             padding: 1em 0 1em 3em;
  31.         }
  32.     </style>
  33.     <script>
  34.         $(function ()
  35.         {
  36.             $("#catalog").accordion();
  37.             $("#catalog li").draggable({
  38.                 appendTo: "body",
  39.                 helper: "clone",
  40.                  connectToSortable: "#widget-content li"
  41.             });
  42.             $("#cart ol").droppable({
  43.                 activeClass: "ui-state-default",
  44.                 hoverClass: "ui-state-hover",
  45.                 accept: ":not(.ui-sortable-helper)",
  46.                 drop: function (event, ui)
  47.                 {
  48.                     $(this).find(".placeholder").remove();
  49.                     $("<li></li>").text(ui.draggable.text()).appendTo(this);
  50.                 }
  51.             }).sortable({
  52.                 items: "li:not(.placeholder)",
  53.                 sort: function ()
  54.                 {
  55.                     // gets added unintentionally by droppable interacting with sortable
  56.                     // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
  57.                     $(this).removeClass("ui-state-default");
  58.                 }
  59.             });
  60.         });
  61.     </script>
  62.     <div class="demo">
  63.         <div id="products">
  64.             <h1 class="ui-widget-header">
  65.                 Products</h1>
  66.             <div id="catalog">
  67.                 <h3>
  68.                     <a href="#">T-Shirts</a></h3>
  69.                 <div>
  70.                     <ul>
  71.                         <li>Lolcat Shirt</li>
  72.                         <li>Cheezeburger Shirt</li>
  73.                         <li>Buckit Shirt</li>
  74.                     </ul>
  75.                 </div>
  76.                 <h3>
  77.                     <a href="#">Bags</a></h3>
  78.                 <div>
  79.                     <ul>
  80.                         <li>Zebra Striped</li>
  81.                         <li>Black Leather</li>
  82.                         <li>Alligator Leather</li>
  83.                     </ul>
  84.                 </div>
  85.                 <h3>
  86.                     <a href="#">Gadgets</a></h3>
  87.                 <div>
  88.                     <ul>
  89.                         <li>iPhone</li>
  90.                         <li>iPod</li>
  91.                         <li>iPad</li>
  92.                     </ul>
  93.                 </div>
  94.             </div>
  95.         </div>
  96.         <div id="cart">
  97.             <h1 class="ui-widget-header">
  98.                 Shopping Cart</h1>
  99.             <div class="ui-widget-content">
  100.                 <ol id="widget-content" >
  101.                     <li class="placeholder">Add your items here</li>
  102.                 </ol>
  103.             </div>
  104.         </div>
  105.     </div>
  106.     <!-- End demo -->
  107.     <div class="demo-description">
  108.         <p>
  109.             Demonstrate how to use an accordion to structure products into a catalog and make
  110.             use drag and drop for adding them to a shopping cart, where they are sortable.</p>
  111.     </div>
  112.     <!-- End demo-description -->
  113. </body>
  114. </html>

Please help me to understand this subject.

Thanks to all!