Drag and drop w AngularJS cz. 2

Tym razem rozbudujemy nasz poprzedni przykład drag nad drop. Dodamy nowy typ - kontener na inne pola. Końcowy efekt będzie wyglądał następująco.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <title>AngularJS Drag and drop example 2</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/demo-framework.css">
        <link rel="stylesheet" type="text/css" href="css/simple.css?a">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
        <script src="js/angular-drag-and-drop-lists.js"></script>
		<script type="text/javascript" src="js/list2.js?a"></script>
	</head>
    <body ng-app="demo" ng-controller="SimpleDemoController">
        <h1>AngularJS Drag and drop</h1>
        <div class="simpleDemo row">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <h3 class="panel-title">List A</h3>
                            </div>
                            <div class="panel-body">
                                <ul class="typeA" dnd-list="models.lists.A" dnd-disable-if="true">
                                    <li ng-repeat="item in models.lists.A"
                                        data-type="{{item.type}}"
                                        dnd-draggable="item"
                                        dnd-type="'{{item.type}}'"
                                        dnd-moved="models.lists.A.splice($index, 1)"
                                        dnd-effect-allowed="copy"
                                        dnd-selected="models.selected = item"
                                        ng-class="{'selected': models.selected === item}"
                                        >
                                        {{item.label}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <h3 class="panel-title">List B</h3>
                            </div>
                            <div class="panel-body">
                                <ul class="typeB" dnd-list="models.lists.B">
                                    <li ng-repeat="item in models.lists.B"
                                        data-type="{{item.type}}"
                                        dnd-draggable="item"
                                        dnd-type="'{{item.type}}'"
                                        dnd-moved="models.lists.B.splice($index, 1)"
                                        dnd-effect-allowed="move"
                                        dnd-selected="models.selected = item"
                                        ng-class="{'selected': models.selected === item}"
                                        >
                                        <div ng-if="item.type === 'container'" class="panel-heading"><h3 class="panel-title">
                                            {{item.label}}
                                        </h3></div>
                                        {{item.label}} <span ng-if="item.type === 'container'">content</span>
                                        <div class="column" ng-if="item.type === 'container'">
                                            <ul dnd-list="item.columns" dnd-allowed-types="allowedTypes">
                                                <li ng-repeat="el in item.columns"
                                                    dnd-draggable="el"
                                                    dnd-type="'{{el.type}}'"
                                                    dnd-effect-allowed="move"
                                                    dnd-moved="item.columns.splice($index, 1)"
                                                    dnd-selected="models.selected = item"
                                                    ng-class="{selected: models.selected === item}"
                                                    >{{el.label}}
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="clearfix"></div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Generated Model</h3>
                    </div>
                    <div class="panel-body">
                        <pre class="code">{{modelAsJson}}</pre>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
Kod html jest prawie taki sam jak w poprzednim przykładzie. Doszedł jedynie następujący kod dotyczący wyświetlenia elementów typu kontener i ich elementów podrzędnych.
<div ng-if="item.type === 'container'" class="panel-heading"><h3 class="panel-title">
	{{item.label}}
</h3></div>
{{item.label}} <span ng-if="item.type === 'container'">content</span>
<div class="column" ng-if="item.type === 'container'">
	<ul dnd-list="item.columns" dnd-allowed-types="allowedTypes">
		<li ng-repeat="el in item.columns"
			dnd-draggable="el"
			dnd-type="'{{el.type}}'"
			dnd-effect-allowed="move"
			dnd-moved="item.columns.splice($index, 1)"
			dnd-selected="models.selected = item"
			ng-class="{selected: models.selected === item}"
			>{{el.label}}
		</li>
	</ul>
</div>
<div class="clearfix"></div>
Kod javascript również jest bardzo podobny do poprzedniego przykładu. Budujemy jedynie typ kontener (type="container"), który zawiera dodatkowy atrybut columns na elementy podrzędne.
angular.module("demo", ["dndLists"]).controller("SimpleDemoController", function($scope) {

    $scope.models = {
        selected: null,
        lists: {"A": [], "B": []}
    };
    $scope.allowedTypes = ['item'];
    // Generate initial model
    for (var i = 1; i <= 3; ++i) {
        $scope.models.lists.A.push({id: i, label: "Item A" + i, type: "item"});
        $scope.models.lists.B.push({id: i,label: "Item B" + i, type: "item"});
    }
    $scope.models.lists.A[2].type="container";
    $scope.models.lists.A[2].columns=[];
    
    $scope.models.lists.B[0].id=4;
    $scope.models.lists.B[1].id=5;
    $scope.models.lists.B[2].id=6;
    $scope.models.lists.B[1].type="container";
    $scope.models.lists.B[1].columns=[{
        "id": 50,
        "label": "Item B21",
        "type": "item"
    },
    {
        "id": 51,
        "label": "Item B22",
        "type": "item"
    }];
    // Model to JSON for demo purpose
    $scope.$watch('models', function(model) {
        $scope.modelAsJson = angular.toJson(model, true);
    }, true);
    
});
Demo działania

Komentarze 0

Dodaj komentarz