Question

我是棱角分明的新手

我想将项目从右侧产品列表（项目：a，b）拖放到中心框ZoneA内的jar。

每个罐子都可以重新排列（拖放）。

右侧产品列表包含a，b称为项目。我想将项目（a或b）拖放到区域A [左侧]中显示的内部jar中

在jar中删除项目后无需在jar中显示项目，只想调用一个回调函数并将参数传递为1.item id，2.jar id。并希望在JSON文件中更新此内容，也希望更改jar的背景颜色以表示其填充项目。

右侧产品清单无需维护ul，li标签中的项目我们也可以使用或我们可以使用的任何东西。

每个罐子我都用过li标签示例： -

jar1
jar2
jar3

请从下面链接查看我的代码

http://plnkr.co/edit/EKR97Z1VR1COHnYe4vdo?p=catalogue

的index.html

<!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>demo</title>

        <!-- jQuery is not required -->
        <!-- <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> -->

        <!-- angular is the only dependency! -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
        <script src="https://marceljuenemann.github.io/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>

        <!-- Stuff that is only required in this demo (no need to copy) -->
        <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/framework/vendor/prism.css">
        <link rel="stylesheet" href="../public/css/demo-framework.css">
        <link rel="stylesheet" type="text/css" href="../public/css/nested.css" />

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
        <script src="https://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/framework/vendor/prism.js"></script>
        <script src="lp-framework.js"></script>
        <script src="planogramcontroller.js"></script>

    </head>
    <body ng-app="planogram">

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">

                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav" navigation></ul>
                </div>
            </div>
        </div>

        <div class="container">

           <!--  <div class="jumbotron">

            </div> -->

            <div ng-view></div>

        </div>

    </body>

陈列图-frame.html

<div class="planogramDemo row" ng-include="'planogram.html'"></div>

popup.html

    <!--<div class="modal-dialog" >-->
<div class="modal-content" >
    <div class="modal-header ng-scope">
        <span class='btn popup-tle-fnt'><b>Bin Details</b></span>
        <button class="btn btn-primary pull-right" type="button" ng-click="close()">Close</button>
    </div>
        <div class="modal-body ng-scope col-md-8">
            <div class='col-md-8'>
                <p class="ng-binding"><b>Bin ID : </b>{{selectedbinid}}</p>
                <p class="ng-binding"><b>Item Name : </b> - </p>
                <img class='min-lft' ng-src='../public/images/gum.png' title='Jar'>
            </div>
            <div class='col-md-2'>
                <div>
                    <button  id="emptybin" ng-click="emptybinfun(selectedbinid)" class="btn btn-primary">Empty&nbsp;&nbsp;</button>
                </div>
                <div class='mrgn-top'>
                    <button  id='disablebin' ng-click="disablebinfun(selectedbinid)" class="btn btn-primary">Disable</button>
                </div>
            </div>
        </div>
    <div class="modal-footer ng-scope">

    </div>
</div>
<!--</div>-->

planogram.html

<script type="text/ng-template" id="list.html" >
    <ul dnd-list="list" id='zone1' ng-controller="PopupDemoCont">
        <li ng-repeat="item in list"
            dnd-draggable="item"
            dnd-effect-allowed="move"
            dnd-moved="list.splice($index, 1)"
            dnd-selected="models.selected = item"
            dnd-external-sources="true"
            class="connectedSortable bgjar"
            ng-class="{selected: models.selected === item}"
            ng-include="item.type + '.html'"
            ng-click="popupwithparameter($index+1)"
            dnd-drop="onDrop(list, item, index)"
            id="{$index+1}">        
    </ul>
</script>



<!-- Template for a normal list item -->
<script type="text/ng-template" id="item.html">
    <div class="item" id="{{item.id}}" data-toggle="modal" data-target="#myModal"><!--Item {{item.id}}-->
    <img class='min-lft' ng-src='../public/images/jar.png' title='Jar'>
    </div>
</script>

<!-- Main area with dropzones and source code -->
<div class="col-md-10">
    <div class="row">
        <div ng-repeat="(zone, list) in models.dropzones" class="col-md-12">
            <div class="dropzone min-hgt box box-lgt-gray">
                <!-- The dropzone also uses the list template -->
                <h3>Zone {{zone}}</h3>
                <div ng-include="'list.html'"></div>
            </div>
        </div>
    </div>
</div>
<!-- Sidebar -->
<div class="col-md-2">
    <div class="toolbox box box-grey box-padding">
        <h3>Product List</h3>

        <ul>
            <li id="1" dnd-effect-allowed="move" ng-class="dragable " class="dragable ">
                <a href="" class="list-group-item">a</a>
            </li>
            <li id="2" dnd-effect-allowed="move" ng-class="dragable " class="dragable ">
                <a href="" class="list-group-item">b</a>
            </li>
        </ul>
    </div>

</div>

LP-framework.js

var planogramPage = angular.module("planogram", ["ngRoute", "dndLists","ngDragDrop","ui.bootstrap"])
.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'planogram-frame.html',
            controller: 'PlanogramController'
        })
        .otherwise({redirectTo: '/'});
})

.directive('navigation', function($rootScope, $location) {
    return {
        template: '<li ng-repeat="option in options" ng-class="{active: isActive(option)}">' +
                  '    <a ng-href="{{option.href}}">{{option.label}}</a>' +
                  '</li>',
        link: function (scope, element, attr) {
            scope.options = [
                {label: "Planogram", href: "#/"}
            ];

            scope.isActive = function(option) {
                return option.href.indexOf(scope.location) === 1;
            };

            $rootScope.$on("$locationChangeSuccess", function(event, next, current) {
                scope.location = $location.path();
            });
        }
    };
})
.service('Bin', function () {
    return {};
});

planogramcontroller.js

    /**
     * The controller doesn't do much more than setting the initial data model
     */
    angular.module("planogram").controller("PlanogramController", function($scope,Bin) {
        $scope.bin = Bin;
        $scope.bin.binstatus = "active-bin";
        $scope.models = {
            selected: null,     
            templates: [
                {type: "item", id: 11}
            ],
            dropzones: {
                "A": [
                    {
                        "type": "item",
                        "id": "1"
                    },
                    {
                        "type": "item",
                        "id": "2"
                    },
                    {
                        "type": "item",
                        "id": "3"
                    },
                    {
                        "type": "item",
                        "id": "4"
                    },
                    {
                        "type": "item",
                        "id": "5"
                    },
                    {
                        "type": "item",
                        "id": "6"
                    },
                    {
                        "type": "item",
                        "id": "7"
                    },
                    {
                        "type": "item",
                        "id": "8"
                    },
                    {
                        "type": "item",
                        "id": "9"
                    },
                    {
                        "type": "item",
                        "id": "10"
                    }
                ]
            }

        };

        //drag drop call back start
        $scope.onDrop = function(list, items, index) {
            console.log('welcome');
          angular.forEach(items, function(item) { item.selected = false; });
          list.items = list.items.slice(0, index)
                      .concat(items)
                      .concat(list.items.slice(index));
          return true;
        }
        $scope.dragStartCallBack = function(list,item,$index){
            console.log('welcome 1');
        }
        $scope.dragStartCallBack1 = function(id){
            console.log('welcome 123'+id);
        }
        $scope.dragoverCallback = function(event,list,type,index){
            console.log('welcome 2');
        }
        $scope.dropCallback = function(event,list,item,index){
            console.log('welcome 3',event);
        }
        $scope.insertedCallback = function(event,list,item,index){
            console.log('welcome 4',event);
        }

        //drag drop call back end

    });//PlanogramController closed here

        // planogram Bin Popup start
        planogramPage.controller('PopupDemoCont', ['$scope','$uibModal',function ($scope, $uibModal) {      
        //javascript code for popuup with passing parameter
            $scope.popupwithparameter = function (binid){   
                var uibModalInstance = $uibModal.open({
                    templateUrl: 'popup.html',
                    controller: 'binPopupCont',
                    resolve: {
                        selectedbin: function () {
                            return binid;
                        }
                    }
                });
            }

        }]);
        //angular.module('PopupDemo')
        planogramPage.controller('binPopupCont',function ($scope,  $uibModalInstance, selectedbin) {

            $scope.selectedbinid = selectedbin;
            $scope.itemname = "Pomegranate";
            $scope.close = function () {            
                $uibModalInstance.dismiss('cancel');
            };      
            //Change bin status
            //$scope.bin.binstatus = "active-bin";
            $scope.emptybinfun = function (binid) {

                angular.element('#'+binid).html("<img class='min-lft' ng-src='../public/images/gray.png' src='../public/images/gray.png' title='Jar'>");
                $scope.apply();
                //$scope.bin.binstatus = "empty-bin";
            };
            //disable bin
            $scope.disablebinfun = function (binid) {

                angular.element('#'+binid).html("<img class='min-lft' ng-src='../public/images/red.png' src='../public/images/red.png' title='Jar'>");
                $scope.apply();
                //$scope.bin.binstatus = "disable-bin";
            };  
        });
    // planogram Bin Popup End

angular js将项目从列表拖放到可拖动项目/对象

0 个答案: