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

希望这有帮助。