在angularJS拖放中禁用克隆答案

【问题标题】：disable cloning in angularJS drag and drop在angularJS拖放中禁用克隆
【发布时间】：2013-10-14 05:28:50
【问题描述】：

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

如何删除这个克隆？

要访问完整的代码，请从这里下载它click to download the .rar file

或者这里是主索引文件的代码下面的粗体代码是 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>`

【问题讨论】：

标签： angularjs drag-and-drop clone

【解决方案1】：

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

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

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

Fiddle

【讨论】：

我没有任何表达式来检查对象是否在购物车中。而且你给的小提琴不起作用，所以没有得到你想要解释的东西。谢谢
小提琴确实有效，所以你应该明白我试图解释的内容。表达式添加了“可拖动”类，这就是它显示为蓝色方块的原因。你到底怎么没有表情来找出你的购物车里是否有东西？您如何对购物车对象执行任何逻辑？
没有得到你想要解释的内容。对不起:)
不。你为什么不在我的问题中从上面的链接下载 .rar 文件，然后告诉我我哪里错了。我对 angularJS 不是很熟悉，这就是为什么没有得到你。
这里是新的下载链接。 Download