how to muliselect[at least two adjacent] items without manually pressing ctrl key and sort them with the rest of the items list?
Question
well iam working on sortable angular ui-sortable plugin https://github.com/angular-ui/ui-sortable
my goal :-muliselect item and sort them simultaneously.
well that can be done with muliselect library of this plugin but for that we have to manually first press and hold ctrl key and while selecting multiple item then release ctrl key now you can sort multiple items. https://github.com/thgreasi/ui-sortable-multiselection
but i dont want user to manually press and hold ctrl key.
currently iam thinking i will trigger ctrl press key for some time and will trigger click on next item then sort the list. i wasted lots of time on this idea but not seems working.am i doing it wrong?
Json data:-
var array = [
{ 'item':1, 'superset':'true' }, { 'item':2, 'superset':'false' }, { 'item':3, 'superset':'true' }, { 'item':4, 'superset':'false' }, { 'item':5, 'superset':'true' }, { 'item':6, 'superset':'false'}, { 'item':7, 'superset':'true' }, { 'item':8, 'superset':'false' }, { 'item':9, 'superset':'true'
}, {
'item':10, 'superset':'false'}
];
inside angular ng-repeat if i found superset key ==true for any item then i want its next adjacent item to be moved with it which have superset ==true.
1 answers
solution1
0 ACCPTED 2018-02-12 13:25:19
I tried to implement your requirements with the plugins that you are using. But I couldn't get it to work. But I managed to get it working with this plugin: angular-drag-and-drop-lists .
It has a multiselection feature that was relatively easy to implement. I copied the code from the multiselection demo( here ) in their page and modified it according to your requirements.
Here is the working plunker: https://plnkr.co/edit/fq4ca0LlKbsfLtFifQ2s?p=preview .
Code:
HTML
<body ng-app="MyApp">
<div ng-controller="MyController">
<ul dnd-list dnd-drop="onDrop(model, val, index)">
<li ng-repeat="val in model.items"
dnd-draggable="getSelectedItemsIncluding(model, val)"
dnd-dragstart="onDragstart(model, event)"
dnd-moved="onMoved(model)"
dnd-dragend="model.dragging = false"
dnd-selected="val.selected = !val.selected"
ng-class="{'selected': val.selected}"
ng-hide="model.dragging && val.selected"
ng-init="val.selected=false">
{{ "Item " + val.item }}
</li>
</ul>
</div>
</body>
JS
var myAppModule = angular.module('MyApp', ['dndLists']);
myAppModule.controller('MyController', function($scope) {
$scope.model = {
items: [{
'item': 1,
'superset': true
}, {
'item': 2,
'superset': false
}, {
'item': 3,
'superset': true
}, {
'item': 4,
'superset': false
}, {
'item': 5,
'superset': true
}, {
'item': 6,
'superset': false
}, {
'item': 7,
'superset': true
}, {
'item': 8,
'superset': false
}, {
'item': 9,
'superset': true
}, {
'item': 10,
'superset': false
}],
dragging: false
};
/**
* dnd-dragging determines what data gets serialized and send to the receiver
* of the drop. While we usually just send a single object, we send the array
* of all selected items here.
*/
$scope.getSelectedItemsIncluding = function(list, item) {
item.selected = true;
if(item.superset) {
var index = list.items.indexOf(item);
list.items[index+1].selected = true;
}
return list.items.filter(function(item) {
return item.selected;
});
};
/**
* We set the list into dragging state, meaning the items that are being
* dragged are hidden. We also use the HTML5 API directly to set a custom
* image, since otherwise only the one item that the user actually dragged
* would be shown as drag image.
*/
$scope.onDragstart = function(list, event) {
list.dragging = true;
console.log(event);
if (event.dataTransfer.setDragImage) {
//event.dataTransfer.setDragImage(img, 0, 0);
}
};
/**
* In the dnd-drop callback, we now have to handle the data array that we
* sent above. We handle the insertion into the list ourselves. By returning
* true, the dnd-list directive won't do the insertion itself.
*/
$scope.onDrop = function(list, items, index) {
items = list.items.filter(function(item) {
return item.selected;
});
angular.forEach(items, function(item) {
item.selected = false;
list.items.splice(list.items.indexOf(item), 1);
});
index = index - items.length;
list.items = list.items.slice(0, index)
.concat(items)
.concat(list.items.slice(index));
$scope.$apply();
return true;
}
/**
* Last but not least, we have to remove the previously dragged items in the
* dnd-moved callback.
*/
$scope.onMoved = function(list) {
list.items = list.items.filter(function(item) {
return !item.selected;
});
};
});
CSS
/**
* The dnd-list should always have a min-height,
* otherwise you can't drop into it once it's empty
*/
.multiDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
/**
* An element with .dndPlaceholder class will be
* added to the dnd-list while the user is dragging
* over it.
*/
.multiDemo ul[dnd-list] .dndPlaceholder {
background-color: #ddd;
display: block;
min-height: 42px;
}
.multiDemo ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
margin-bottom: -1px;
padding: 10px 15px;
}
/**
* Show selected elements in green
*/
.multiDemo ul[dnd-list] li.selected {
background-color: #dff0d8;
color: #3c763d;
}
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.