seimin
/
zuel-itsm-3.0.2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
							<!DOCTYPE html>
<html>
<head>
    <title>ngDraggable</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
    <style>


        * {

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

        }


        [ng-drag] {

            -moz-user-select: -moz-none;

            -khtml-user-select: none;

            -webkit-user-select: none;

            -ms-user-select: none;

            user-select: none;

        }


        [ng-drag] {

            width: 100px;

            height: 100px;

            background: rgba(255, 0, 0, 0.5);

            color: white;

            text-align: center;

            padding-top: 40px;

            display: inline-block;

            margin: 0 10px;

            cursor: move;

        }


        ul.draggable-objects:after {

            display: block;

            content: "";

            clear: both;

        }


        .draggable-objects li {

            float: left;

            display: block;

            width: 120px;

            height: 100px;

        }


        [ng-drag].drag-over {

            border: solid 1px red;

        }


        [ng-drag].dragging {

            opacity: 0.5;

        }


        [ng-drop] {

            background: rgba(0, 255, 0, 0.5);

            text-align: center;

            width: 600px;

            height: 200px;

            padding-top: 90px;

            display: block;

            margin: 20px auto;

            position: relative;

        }


        [ng-drop].drag-enter {

            border: solid 5px red;

        }


        [ng-drop] span.title {

            display: block;

            position: absolute;

            top: 50%;

            left: 50%;

            width: 200px;

            height: 20px;

            margin-left: -100px;

            margin-top: -10px;

        }


        [ng-drop] div {

            position: relative;

            z-index: 2;

        }


    </style>
</head>
<body ng-app="ExampleApp">

<div class="container" ng-controller="MainCtrl">

    <div class="row">
        <h1>ngDraggable Example</h1>
    </div>

    <ul class="draggable-objects">
        <li ng-if="true">
            <div ng-drag="true" ng-drag-data="{name:'test'}" data-allow-transform="true">TEST</div>
        </li>
    </ul>

    <hr/>
    <div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
        <span class="title">Drop area #1</span>

        <div ng-repeat="obj in droppedObjects1" ng-drag="true" ng-drag-data="obj"

             ng-drag-success="onDragSuccess1($data,$event)" ng-center-anchor="{{centerAnchor}}">
            {{obj.name}}
        </div>

    </div>

    <div ng-drop="true" ng-drop-success="onDropComplete2($data,$event)">
        <span class="title">Drop area #2</span>

        <div ng-repeat="obj in droppedObjects2" ng-drag="true" ng-drag-data="obj"

             ng-drag-success="onDragSuccess2($data,$event)" ng-center-anchor="{{centerAnchor}}">
            {{obj.name}}
        </div>

    </div>

    <hr>


</div>
<footer style="margin-top:2000px;">footer</footer>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="ngDraggable.js"></script>
<script>

    angular.module('ExampleApp', ['ngDraggable']).

            controller('MainCtrl', function ($scope) {

                $scope.centerAnchor = true;

                $scope.toggleCenterAnchor = function () {

                    $scope.centerAnchor = !$scope.centerAnchor

                }

                //$scope.draggableObjects = [{name:'one'}, {name:'two'}, {name:'three'}];


                var onDraggableEvent = function (evt, data) {

                    console.log("128", "onDraggableEvent", evt, data);

                }

                $scope.$on('draggable:start', onDraggableEvent);

               // $scope.$on('draggable:move', onDraggableEvent);

                $scope.$on('draggable:end', onDraggableEvent);

                $scope.droppedObjects1 = [];

                $scope.droppedObjects2 = [];

                $scope.onDropComplete1 = function (data, evt) {

                    console.log("127", "$scope", "onDropComplete1", data, evt);

                    var index = $scope.droppedObjects1.indexOf(data);

                    if (index == -1)

                        $scope.droppedObjects1.push(data);

                }

                $scope.onDragSuccess1 = function (data, evt) {

                    console.log("133", "$scope", "onDragSuccess1", "", evt);

                    var index = $scope.droppedObjects1.indexOf(data);

                    if (index > -1) {

                        $scope.droppedObjects1.splice(index, 1);

                    }

                }

                $scope.onDragSuccess2 = function (data, evt) {

                    var index = $scope.droppedObjects2.indexOf(data);

                    if (index > -1) {

                        $scope.droppedObjects2.splice(index, 1);

                    }

                }

                $scope.onDropComplete2 = function (data, evt) {

                    var index = $scope.droppedObjects2.indexOf(data);

                    if (index == -1) {

                        $scope.droppedObjects2.push(data);

                    }

                }

                var inArray = function (array, obj) {

                    var index = array.indexOf(obj);

                }

            });

</script>
</body>
</html>