更改放置項目的顏色並限制其在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和1.12.4 jQuery

腳本：

<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>

希望有幫助。