親切そう、コードをチェックし、問題を強調表示し、私はソート可能</p> <p>になるためにドロップ可能なアイテムを作ることができませんドロップ可能なjQueryのUIの機能を提供することができないのですが、jQueryの

Question

でdroppablesにソート可能な機能を追加することができません私はドロップ可能なアイテムのソート可能な機能を得ることができます。

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コード

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 
    }); 

問題を修正1。