The app (AngularJS 1.5.11, https://codepen.io/loenko/pen/qPOWRp) is the group of lists with draggable items (implemented with dnd-list directive from corresponding package https://github.com/marceljuenemann/angular-drag-and-drop-lists).
Items in all the three lists are from the same array of item objects. They are put into the corresponding list by filter on item's 'list' property.
The problem is in sorting of items inside of lists after dragging and dropping of the item. They should be (I want them to be) placed exactly where they're dropped, but they're sorted automatically (dropped item is pushed to the end of the list).
Is there a way to implement such functionality without creating any additional sorting arrays, changing the d'n'd implementation package and changing the data model (it's predefined)?
Anyway, I'll appreciate all the alternative solutions!
The structure of lists is as follows:
<div ng-repeat="list in lists">
<ul dnd-list="list"
dnd-drop="callback({targetName: list.name})">
<li ng-repeat="item in items | filter:item.list=list.name"
dnd-draggable="item"
dnd-callback="item.list = targetName">
{{item.name}}
</li>
</ul>
</div>
The data model is:
$scope.lists=[
{name:"List 1"}, {name:"List 2"}, {name:"List 3"}
];
$scope.items=[
{name:"Item 1",list:"List 1"}, {name:"Item 2",list:"List 2"}, {name:"Item 3",list:"List 3"}
];
angular.module('app', ['dndLists'])
.controller('mainCtrl', function($scope){
$scope.lists=[
{name:"List 1"}, {name:"List 2"}, {name:"List 3"}
];
$scope.items=[
{name:"Item 1",list:"List 1"},{name:"Item 2",list:"List 2"},{name:"Item 3",list:"List 3"}
];
$scope.addItem = function() {
var newItemIndex = $scope.items.length+1;
var newItemName = prompt("Enter new item name", "Item "+newItemIndex);
if (newItemName == null || newItemName == "") {
console.log("User cancelled the prompt.");
} else {
$scope.items.push({name:newItemName,list:"List 2"});
}
};
$scope.clear = function() {
var confClear = confirm("Are you sure you want to delete all the items?")
if (confClear = true) $scope.items = [];
}
});body {
background-color: whitesmoke;
}
.toolbar {
width: 100%;
background: lightgray;
height: 60px;
margin-bottom: 15px;
}
.toolbar button {
height: 40px;
width: 160px;
margin-top: 8px;
margin-left: 10px;
border-radius: 8px;
border: none;
box-shadow: 2px 2px 3px green;
outline-style: none;
background-color: lightgreen;
font-weight: bold;
font-size: 18px;
color: white;
}
.toolbar button:hover {
background-color: #64e764;
}
ul[dnd-list] {
min-height: 40px;
list-style-type: none;
padding: 5px;
margin: 10;
position: relative;
border: 2px solid lightgray;
box-sizing: border-box;
width: 70%;
}
ul[dnd-list] .dndDraggingSource {
display: none;
}
ul[dnd-list] .dndDragging {
opacity: 0.7;
}
ul[dnd-list] .dndPlaceholder {
min-height: 40px;
box-sizing: border-box;
border: 2px dotted gray;
}
.list {
margin-left: 10px;
}
.item {
background-color: lightgreen;
color: white;
width: 100%;
height: 40px;
margin-top: 5px;
margin-bottom: 5px;
}
.item .item-name {
line-height: 1.9;
margin-left: 5px;
}
.list-name {
color: gray;
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sorting items in lists (d'n'd issue)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div ng-app="app" ng-controller="mainCtrl">
<div class="toolbar">
<button ng-click="addItem()">ADD ITEM</button>
<button ng-click="clear()">CLEAR LIST</button></div>
<div class="list" ng-repeat="list in lists">
<div class="list-name">{{list.name}}</div>
<ul dnd-list="list"
dnd-drop="callback({targetName: list.name})">
<li class="item"
ng-repeat="item in items | filter:item.list=list.name"
dnd-draggable="item"
dnd-callback="item.list = targetName">
<div class="item-name">{{item.name}}</div>
</li>
</ul>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-drag-and-drop-lists/2.1.0/angular-drag-and-drop-lists.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>Hi I know this is not exactly what you asked but I played around with your code and if you're happy with some changes like code adjustments and example combined your 2 lists in JSON like this:
[
{
name: "Test List One",
items: [
{
name: 'Some item 1',
value: 1000
},
{
name: 'Some item 2',
value: 2000
},
]
},
{
name: "Test List Two",
items: [
{
name: 'Some item 3',
value: 3000
},
{
name: 'Some item 4',
value: 4000
},
]
}
];
take a look here, https://codepen.io/anon/pen/WZQbPm?editors=1010 I also added some helper functions as well if you need to get some items from new JSON structure.
Sorry if this is not what you asked, but personally I think JSON changes are better also it's bit nicer to write code in functions and expose them to $scope then to write $scope.someFunction every time.