Question

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

如何删除此克隆？

要访问完整代码，请从此处click to download the .rar file

下载

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

`

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

Answer 1

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

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

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

Fiddle

在angularJS拖放中禁用克隆

1 个答案: