Drag and Drop divs AngularJS

by etiennenoel

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<div id="ima_pm_forms" ng-app="processManagementApp" ng-controller="StepsCtrl">

    <div ui-sortable="sortSteps" ng-model="steps">


        <div ng-repeat="step in steps" ng-if="step.deleted == false">

            <div class="ima_pm_processStepBar">
                <div class="ima_pm_processStepBar-chevron">
                    <a href="#step_collapseStep_{{$index}}" ng-click="step.collapse()"><i
                            class="icon-chevron-down"></i></a>
                </div>
                <div class="ima_pm_processStepBar-nameInput">
                    <input type="text" placeholder="Nom de l'étape" class="form-control"
                           ng-model="step.name">

                </div>
                <div class="ima_pm_processStepBar-deleteInput">
                    <a href="#step_removeStep_{{$index}}" ng-click="deleteStep($index);">Supprimer
                        l'étape</a>
                </div>
            </div>


            <div class="ima_pm_processSteps" ng-class="{ collapsed: step.collapsed == true }">

                <div ui-sortable="sortTasks">
                    <div class="ima_pm_processSteps-task" ng-repeat="task in step.tasks"
                         ng-if="task.deleted == false">
                        <input type="text" placeholder="Nom de la tâche" class="form-control"
                               ng-model="task.name">
                        <a href="#step_removeTask_{{$index}}" ng-click="step.deleteTask($index)"
                          ...

CSS

.ima-pm-bold {
    font-weight: bold;
}
#ima_pm_forms {
    display: block;
    font-family: HelveticaNeue, arial, helvetica, clean, sans-serif;
    margin-left: 20px;
}
#ima_pm_forms .ima_pm_form-label {
    font-weight: bold;
    font-size: 14pt;
    line-height: 40px;
    margin-top: 15px;
    text-align: left;
    width: 400px;
}
#ima_pm_forms .ima_pm_form-input {
    clear: both;
    display: block;
}
#ima_pm_forms hr {
    margin: 30px 0px 0px 0px;
}
#ima_pm_forms h2 {
    margin: 30px 0px 30px 0px;
}
#ima_pm_forms .ima_pm_processStepBar {
    background: linear-gradient(to bottom, #ffffff, #ffffff, #f0f0f0);
    background-color: lightgray;
    border: 1px solid lightgrey;
    border-radius: 5px;
    padding: 14px;
    position: relative;
    margin-top: 35px;
    height:50px;
}
#ima_pm_forms .ima_pm_processStepBar .ima_pm_processStepBar-nameInput {
    position: absolute;
    left: 50px;
    top: 7px;
    width: 400px;
}
#ima_pm_forms .ima_pm_processStepBar .ima_pm_processStepBar-deleteInput {
    padding: 14px;
    position: absolute;
    right: 0px;
    top: 0px;
}
#ima_pm_forms .ima_pm_processStepBar .ima_pm_processStepBar-deleteInput a {
    color: #d9534f;
}
#ima_pm_forms .collapsed {
    display: none;
}
#ima_pm_forms .ima_pm_processSteps {
    margin: 20px 0px 0px 20px;
}
#ima_pm_forms .ima_pm_processSteps .ima_pm_processSteps-task {
    margin-top: 10px;
    position: relative;
}
#ima_pm_forms .ima_pm_processSteps .ima_pm_processSteps-task input {
    width: 300px;
}
#ima_pm_forms .ima_pm_processSteps .ima_pm_processSteps-task .ima_pm_processSteps-icons {
    position: absolute;
    left: 310px;
    top: 7px;
}
#ima_pm_forms .ima_pm_processSteps .ima_pm_processSteps-addTask {
    margin-top: 10px;
    margin-left: -10px;
}
#ima_pm_forms .ima_pm_processSteps-addStep {
    margin-top: 10px;
}
#ima_pm_forms .ima_pm_processSteps-drag {
    cursor: move;
    margin-right: 9px;
    margin-top: 9px;
}
#ima_pm_forms hr {
    margin-top: 25px;
}