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>