在angularJS拖放中禁用克隆_Angularjs_Drag And Drop_Clone

在angularJS拖放中禁用克隆

angularjs

在angularJS拖放中禁用克隆,angularjs,drag-and-drop,clone,Angularjs,Drag And Drop,Clone,我使用angularJS拖放创建了一个购物车。当我将商品从目录拖到购物车并将其放下时，它成功地进入购物车，问题是，当我在购物车中拖放相同的项目时，它再次接受产品并将其添加到购物车中 <div ng-class="{draggable: cart.indexOf(object) != -1}"></div> 如何删除此克隆要访问完整的代码，请从这里下载或者这是主索引文件的代码下面的粗体代码是CSS和脚本的附件，您可以从上面的.rar文件或通过谷歌搜索脚本名称下载相

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

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

如何删除此克隆

要访问完整的代码，请从这里下载

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


拖放；滴
****

**
**
.缩略图{高度：280px！重要；}
.btn可拖放{宽度：180px；高度：30px；左侧填充：4px；}
.btn可拖动{宽度：160px；}
.emage{高度：215px；}
h1{填充：.2em；边距：0；}
#产品{浮动：左；宽度：500px；右边距：2em；}
#购物车{宽度：200px；浮动：左侧；边距顶部：1em；}
#购物车ol{边距：0；填充：1em 0 1em 3em；}
$（函数（）{
$（“#目录”）.accordion（）；
});
var App=angular.module（'drag-and-drop'，['ngDragDrop']）；
App.controller（'oneCtrl'，函数（$scope，$timeout）{
$scope.list1=[{'title'：'Lolcat Shirt'}，{'title'：'cheezburger Shirt'}，{'title'：'Buckit Shirt'}]；
$scope.list4=[]；
$scope.hideMe=函数（）{
$scope.list1=[{'title'：'Lolcat Shirt'}，{'title'：'cheezburger Shirt'}，{'title'：'Buckit Shirt'}]；
返回$scope.list4.length>0；
}
});


产品

{item.title}{list1.length}”


购物车

{{item.title}


在此处添加您的项目

`

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

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

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

我没有任何表达式来检查对象是否在购物车中。你给的小提琴不起作用，所以没有得到你想要解释的东西。谢谢小提琴确实有用，所以你应该明白我想解释的。类“draggable”由表达式添加，这就是它显示为蓝色正方形的原因。你到底怎么会没有一个表情来判断你的车里是否有东西？你如何在你的购物车对象上执行任何逻辑？我不明白你想解释什么。对不起：）没有。你为什么不从我的问题上面的链接下载.rar文件，告诉我哪里错了。我对angularJS不是很熟悉，这就是为什么我不了解你。这是新的下载链接。

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

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