在jquery中刪除項目和限制項目後顏色發生變化

Question

我想在項目放入購物車後改變其顏色，然後不允許用戶再次刪除此項目。這裏是我的手風琴代碼：

<div id="products"> 
     <h1 class="ui-widget-header">Products</h1>  
     <div id="catalog"> 
      <h3><a href="#">T-Shirts</a></h3> 
      <div> 
       <ul> 
        <li class='ui-state-highlight'>Lolcat Shirt</li> 
        <li class='ui-state-highlight'>Cheezeburger Shirt</li> 
        <li class='ui-state-highlight'>Buckit Shirt</li> 
       </ul> 
      </div> 
      <h3><a href="#">Bags</a></h3> 
      <div> 
       <ul> 
        <li class='ui-state-highlight'>Zebra Striped</li> 
        <li class='ui-state-highlight'>Black Leather</li> 
        <li class='ui-state-highlight'>Alligator Leather</li> 
       </ul> 
      </div> 
      <h3><a href="#">Gadgets</a></h3> 
      <div> 
       <ul> 
        <li class='ui-state-highlight'>iPhone</li> 
        <li class='ui-state-highlight'>iPod</li> 
        <li class='ui-state-highlight'>iPad</li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div id="cart"> 
     <h1 class="ui-widget-header">Shopping Cart</h1> 
     <div class="ui-widget-content"> 
      <ol> 
       <li class="placeholder">Add your items here</li> 
      </ol> 
     </div> 
    </div> 

</div><!-- End demo --> 

    <script> 
    $(function() { 
     $("#catalog").accordion(); 
     $("#catalog li").draggable({ 
      appendTo: "body", 
      helper: "clone" 
     }); 
     $("#cart ol").droppable({ 
      activeClass: "ui-state-default", 
      hoverClass: "ui-state-hover", 
      accept: ":not(.ui-sortable-helper)", 
      drop: function(event, ui) { 
       $(this).find(".placeholder").remove(); 
       $("<li></li>").text(ui.draggable.text()) 
        .addClass("cart-item") 
        .appendTo(this); 
      } 
     }).sortable({ 
      items: "li:not(.placeholder)", 
      sort: function() { 
       $(this).removeClass("ui-state-default"); 
      } 
     }); 
     $("#catalog ul").droppable({ 
      drop: function(event, ui) { 
       $(ui.draggable).remove(); 
      }, 
      hoverClass: "ui-state-hover", 
      accept: '.cart-item' 
     }); 
    }); 
    </script> 

這裏是小提琴，我能夠拖放項目，但我想添加一些功能，如改變手風琴項目的顏色被丟棄到可投放區域，和也不允許用戶放棄兩次相同的物品。任何想法如何做到？提前致謝。這裏是提琴：http://jsfiddle.net/andrewwhitaker/t97FE/?utm_source=website&utm_medium=embed&utm_campaign=t97FE

Answer 1

注： - 我使用1.12.1 jQuery的UI和jQuery的1.12.4

腳本：

<script> 
$(function() { 
    var itm = []; 
    $("#catalog").accordion(); 
    $("#catalog li").draggable({ 
     appendTo: "body", 
     helper: "clone" 
    }); 
    $("#cart ol").droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function(event, ui) { 
       var zz = ui.draggable.text() 
       var xyz = itm.includes(zz); 

       if(xyz===false){ 
        $(this).find(".placeholder").remove(); 
        $("<li></li>").text(ui.draggable.text())      
        .addClass("cart-item") 
        .appendTo(this); 

        //add to array 
        itm.push(zz); 
        //add style 
        $('.ui-droppable').find("li.ui-draggable:contains('"+zz+"')").addClass('bred'); 
       }else{ 
        alert('Item Already Exist'); 
       } 

     } 
    }).sortable({ 
     items: "li:not(.placeholder)", 
     sort: function() { 
      $(this).removeClass("ui-state-default"); 
     } 
    }); 
    $("#catalog ul").droppable({ 
     drop: function(event, ui) { 
      $(ui.draggable).remove(); 
      var zz = ui.draggable.text() 
      $('.ui-droppable').find("li.ui-draggable:contains('"+zz+"')").removeClass('bred'); 

      var indexItm = itm.indexOf(zz); 
      if (indexItm > -1) { 
       itm.splice(indexItm, 1); 
      } 
     }, 
     hoverClass: "ui-state-hover", 
     accept: '.cart-item' 
    }); 
});  
</script> 

和CSS：

<style> 
h1 { padding: .2em; margin: 0; } 
#products { float:left; width: 500px; margin-right: 2em; } 
#cart { width: 200px; float: left; } 
/* style the list to maximize the droppable hitarea */ 
#cart ol { margin: 0; padding: 1em 0 1em 3em; } 

.cart-item{color:green;font-weight:bolder} 
.bred{color:red;} 
</style> 

希望這幫幫我。