不能排序的功能jQuery中

Question

添加到droppables我不能够提供可放开jQuery UI的功能，但不能使可投放项目成为排序

请检查代码，突出的问题，所以我可以对可丢弃的物品进行排序。

HTML代码

<div id="item_container"> 
    <div class="item" id="i1">    
     <label class="title">T-Shirt 1</label> 
     <label class="price">$ 20</label> 
    </div> 
    <div class="item" id="i2"> 
     <label class="title">T-Shirt 2</label> 
     <label class="price">$ 24</label> 
    </div> 
    <div class="clear"></div> 
</div> 

<div id="cart_container"> 
    <div id="cart_toolbar"> 
     <div id="cart_items" class="back"> 
     </div> 
    </div> 
</div> 

JS CODE

var total_items = 0; 
var total_price = 0; 
$(document).ready(function() { 

$(".item").draggable({ 
    revert: true 
}); 
$("#cart_items").draggable({ 
    axis: "x" 
}); 

$("#cart_items").sortable({ 
    connectWith: "#cart_items" 
}); 
//$(".ro").sortable(); 
$("#cart_items").droppable({ 
    accept: ".item", 
    activeClass: "drop-active", 
    hoverClass: "drop-hover", 
    drop: function(event, ui) { 
     $("#cart_items").append("<div style='clear:both'><select class='s1'><option value='1'>1</option><option value='2'>2</option></select></div>"); 

    } 
}); 

}）;

CSS样式

body 
    { 
     font-family: Arial, "Free Sans"; 
     margin: 0; 
     padding: 0; 
    } 
    #main 
    { 
     background: #0099cc; 
     margin-top: 0; 
     padding: 2px 0 4px 0; 
     text-align: center; 
    } 
    #main a 
    { 
     color: #ffffff; 
     text-decoration: none; 
     font-size: 12px; 
     font-weight: bold; 
     font-family: Arial; 
    } 
    #main a:hover 
    { 
     text-decoration: underline; 
    } 
    #item_container 
    { 
     width: 610px; 
     margin: 0 auto; 
     margin-top: 10px; 
     margin-bottom: 10px; 
    } 
    .item 
    { 
     background: #fff; 
     float: left; 
     padding: 5px; 
     margin: 5px; 
     cursor: move; 
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5); 
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5); 
     box-shadow: 0 1px 2px rgba(0,0,0,.5); 
     -webkit-border-radius: .5em; 
     -moz-border-radius: .5em; 
     border-radius: .5em; 
     z-index: 5; 
    } 
    .title, .price 
    { 
     display: block; 
     text-align: center; 
     font-size: 14px; 
     letter-spacing: -1px; 
     font-weight: bold; 
     cursor: move; 
    } 
    .title 
    { 
     color: #333; 
    } 
    .price 
    { 
     color: #0099cc; 
     margin-top: 5px; 
     -webkit-border-radius: .5em; 
     -moz-border-radius: .5em; 
     border-radius: .5em; 
    } 
    .icart, .icart label 
    { 
     cursor: e-resize; 
    } 
    .divrm 
    { 
     text-align: right; 
    } 
    .remove 
    { 
     text-decoration: none; 
     cursor: pointer; 
     font-weight: bold; 
     font-size: 20px; 
     position: relative; 
     top: -7px; 
    } 
    .remove:hover 
    { 
     color: #999; 
    } 
    .clear 
    { 
     clear: both; 
    } 
    #cart_container 
    { 
     margin: 0 auto; 
     width: 495px; 
    } 
    #cart_title span 
    { 
     border: 8px solid #666; 
     border-bottom-width: 0; 
     background: #333; 
     display: block; 
     float: left; 
     color: #fff; 
     font-size: 11px; 
     font-weight: bold; 
     padding: 5px 10px; 
     -webkit-border-radius: .5em .5em 0 0; 
     -moz-border-radius: .5em .5em 0 0; 
     border-radius: .5em .5em 0 0; 
    } 
    #cart_toolbar 
    { 
     overflow: hidden; 
     border: 8px solid #666; 
     height: 190px; 
     z-index: -2; 
     width: 483px; 
     -webkit-border-radius: 0 .5em 0 0; 
     -moz-border-radius: 0 .5em 0 0; 
     border-radius: 0 .5em 0 0; 
     background: #ffffff; 
    } 
    #cart_items 
    { 
     height: 190px; 
     width: 483px; 
     position: relative; 
     padding: 0 0 0 2px; 
     z-index: 0; 
     cursor: e-resize; 
     border-width: 0 2px; 
    } 
    .back 
    { 
     background: #e9e9e9; 
    } 
    #navigate 
    { 
     width: 463px; 
     margin: 0 auto; 
     border: 8px solid #666; 
     border-top-width: 0; 
     -webkit-border-radius: 0 0 .5em .5em; 
     -moz-border-radius: 0 0 .5em .5em; 
     border-radius: 0 0 .5em .5em; 
     padding: 10px; 
     font-size: 14px; 
     background: #333; 
     font-weight: bold; 
    } 
    #nav_left 
    { 
     float: left; 
    } 
    #nav_left a 
    { 
     padding: 4px 8px; 
     background: #fff; 
     -webkit-border-radius: .5em; 
     -moz-border-radius: .5em; 
     border-radius: .5em; 
     text-decoration: none; 
     color: #0099cc; 
    } 
    #nav_left a:hover 
    { 
     background: #666; 
     color: #fff; 
    } 
    #nav_right 
    { 
     float: right; 
    } 
    .sptext 
    { 
     background: #ffffff; 
     padding: 4px 8px; 
     margin-left: 8px; 
     -webkit-border-radius: .5em; 
     -moz-border-radius: .5em; 
     border-radius: .5em; 
     color: #666; 
    } 
    .count 
    { 
     color: #0099cc; 
    } 
    .drop-active 
    { 
     background: #ffff99; 
    } 
    .drop-hover 
    { 
     background: #ffff66; 
    } 

上gettnig此做任何提示是真的有益

Answer 1

固定问题

下面的代码

$("#cart_items").sortable({ 
     revert: true 
    }); 

的目标股利未声明的排序一。