0

我使用 angularJS 拖放创建了一个购物车。当我将商品从目录拖到购物车并放下时，它成功进入购物车，问题是当我将相同的商品拖放到购物车中时，它再次接受产品并将其添加到购物车中。

如何删除这个克隆？

要访问完整的代码，请从这里下载 点击下载 .rar 文件

或者这里是主索引文件的代码，下面的粗体代码是 CSS 和脚本的附件，您可以从上面的 .rar 文件或通过谷歌搜索脚本名称下载相同的版本。

`

<meta charset="utf-8" />

<title>Drag &amp; Drop</title>

**<script src="js/jquery.min.js"></script>**

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">


<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js">


**<script src="angular_drag_drop/angular-dragdrop.js"></script>

<link href="assets/css/jquery-ui.css" rel="stylesheet">**

<style>

    .thumbnail { height: 280px !important; }

    .btn-droppable { width: 180px; height: 30px; padding-left: 4px; }

    .btn-draggable { width: 160px; }

    .emage { height: 215px; }

    h1 { padding: .2em; margin: 0; }

    #products { float:left; width: 500px; margin-right: 2em; }

    #cart { width: 200px; float: left; margin-top: 1em; }

    #cart ol { margin: 0; padding: 1em 0 1em 3em; }

</style>

<script>

    $(function() {

        $("#catalog").accordion();

    });

    var App = angular.module('drag-and-drop', ['ngDragDrop']);

    App.controller('oneCtrl', function($scope, $timeout) {

        $scope.list1 = [{'title': 'Lolcat Shirt'},{'title': 'Cheezeburger Shirt'},{'title': 'Buckit Shirt'}];


        $scope.list4 = [];

        $scope.hideMe = function() {

        $scope.list1 = [{'title': 'Lolcat Shirt'},{'title': 'Cheezeburger Shirt'},{'title': 'Buckit Shirt'}];

        return $scope.list4.length > 0;

    }

});

</script>


<body ng-controller="oneCtrl">



    <div id="products">

    <h1 class="ui-widget-header">Products</h1>

    <div id="catalog">

        <h2><a href="#">T-Shirts</a></h2>

        <div data-drop="true" ng-model='list1' jqyoui-droppable="{multiple:true}">

            <ul>

                <li ng-repeat='item in list1' ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list1" jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}">{{item.title}} {{list1.length}} 
</li>
            </ul>

        </div>

    </div>

</div> 

<div id="cart">

    <h1 class="ui-widget-header">Shopping Cart</h1>

    <div class="ui-widget-content">

        <ol data-drop="true" ng-model='list4' jqyoui-droppable="{multiple:true}">

            <li ng-repeat="item in list4" ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
{{item.title}} 
</li>

            <li class="placeholder" ng-hide="hideMe()">
Add your items here
</li>

        </ol>

    </div>

</div>


</body>

</html>`
4

1 回答 1

0

如果您的购物车是拖放的唯一用例，那么您可以通过在对象进入购物车后禁用拖动来解决此问题。您可以通过将可拖动类绑定到检查对象是否在购物车中的表达式来做到这一点。

<div ng-class="{draggable: cart.indexOf(object) != -1}"></div>

这是一个基本的小提琴，向您展示我的意思-注意，这不包括任何拖放，而只是为了突出类绑定，并帮助您入门。

小提琴

于 2013-10-14T08:28:11.843 回答