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