Angular js drag & drop list

by Guddu Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
<script src="https://rawgit.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div ng-controller="MainCtrl as main">
    <ul ui-sortable="sortableOptions" ng-model="list1" class="apps-container list floatleft">
        <li class="app" ng-repeat="app in list1">{{ app.name }}</li>
    </ul>
    <ul ui-sortable="sortableOptions" ng-model="list2" class="apps-container list floatleft">
        <li class="app" ng-repeat="app in list2">{{ app.name }}</li>
    </ul>
</div>

CSS

.list {
    list-style: none outside none;
    margin: 10px 0 30px;
}
.app {
	width: 170px;
	padding: 5px 10px;
	margin: 5px 0;
	border: 2px solid #444;
	border-radius: 5px;
	background-color: #EA8A8A;

	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	cursor: move;
}


.item {
    width: 200px;
    padding: 5px 10px;
    margin: 5px 0;
    border: 2px solid #444;
    border-radius: 5px;
    background-color: #EA8A8A;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    cursor: move;
}
/***  Extra ***/
 body {
    font-family: Verdana, 'Trebuchet ms', Tahoma;
}
.logList {
    margin-top: 20px;
    width: 250px;
    min-height: 200px;
    padding: 5px 15px;
    border: 5px solid #000;
    border-radius: 15px;
}
.logList:before {
    content:'log';
    padding: 0 5px;
    position: relative;
    top: -1.1em;
    background-color: #FFF;
}
.container {
    width: 600px;
    margin: auto;
}
h2 {
    text-align: center;
}
.floatleft {
    float: left;
}
.clear {
    clear: both;
}

.apps-container {
    border: 1px dotted blue;
}

JavaScript

var app = angular.module('myApp', ['ui.sortable']);

app.controller('MainCtrl', ['$scope', function ($scope) {
    var vm = this;

    $scope.rawList = [[{
        name: 'listitem1',
        additions: []
    }, {
        name: '@prefix rdfs: < http: //www.w3.org/2000/01/rdf-schema#>',
        additions: []
    }, {
        name: 'listitem3',
        additions: []
    }], [{
        name: 'listitem1 b',
        additions: []
    }, {
        name: 'listitem2 b',
        additions: []
    }, {
        name: 'listitem3 b',
        additions: []
    }]];

    //$scope.list = [];
    //$scope.list.items = $scope.rawList;
    $scope.list1 = $scope.rawList[0];
        
    //$scope.cart = [];
    //$scope.cart.items=[];
    //$scope.cart.items.push($scope.rawList[1]);
    $scope.list2 = $scope.rawList[1];

    $scope.sortableOptions = {
        'ui-floating': true,
        placeholder: "app",
        connectWith: ".apps-container",
        update: function (e, ui) {
        debugger
            //console.log(e, ui);
            console.log('updated');
             
        },
        stop: function (e, ui) {
            // this callback has the changed model
            console.log('stopped');
            console.log($scope.list2);
        }
    };

}]);