seimin
/
itsm-pc-handle


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!DOCTYPE html>
<html>
<head>
    <title>ngDraggable</title>
    <link rel="stylesheet" href="http://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: block;
            cursor: move;
        }

        [ng-drag].one {
            background: rgba(255, 0, 0, 0.5);
        }

        [ng-drag].two {
            background: rgba(0, 255, 0, 0.5);
        }

        [ng-drag].three {
            background: rgba(0, 0, 255, 0.5);
        }

        [ng-drag].drag-over {
            border: solid 1px red;
        }

        [ng-drag].dragging {
            opacity: 0.5;
        }

        [ng-drop] {
            background: rgba(0, 0, 0, 0.25);
            text-align: center;
            display: block;
            position: relative;
            padding: 20px;
            width: 140px;
            height: 140px;
            float: left;
        }

        [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;
        }

        .draglist {
            display: inline-block;
            margin: 0 auto;
        }


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


<div class="row  text-center">
    <h1>ngDraggable Ordering Example</h1>
</div>
<hr/>

<div class="row text-center" ng-controller="MainCtrl">
    <ul class="draglist">
        <li ng-repeat="obj in draggableObjects" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)">
            <div ng-drag="true" ng-drag-data="obj" ng-class="obj.name">
                {{obj.name}}
            </div>
        </li>
    </ul>
</div>

<hr/>

<script src="http://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.draggableObjects = [
                    {name: 'one'},
                    {name: 'two'},
                    {name: 'three'}
                ];
                $scope.onDropComplete = function (index, obj, evt) {
                    var otherObj = $scope.draggableObjects[index];
                    var otherIndex = $scope.draggableObjects.indexOf(obj);
                    $scope.draggableObjects[index] = obj;
                    $scope.draggableObjects[otherIndex] = otherObj;
                }
            });
</script>
</body>
</html>