angular-drag-and-drop-lists icon indicating copy to clipboard operation
angular-drag-and-drop-lists copied to clipboard

For "simple" - if you select an item and then drag it, the "generated model" is incorrect, as has duplicates

Open IvanReznikov opened this issue 7 years ago • 4 comments

The old value of the highlighted element isn't deleted.

IvanReznikov avatar May 31 '17 11:05 IvanReznikov

I am also facing the same issue, as soon I drag the element resultant model contains the duplicate values. Not able to fix this issue. Any help appericated

anujshsdei avatar Jun 29 '17 13:06 anujshsdei

I believe this might be an issue with the $index and splice code. Moved fires after the element is added to the list so if you move an item to a location that is before the original location the index will be incorrect. Not sure how to get the previous index short of stashing it in a draggingStart.

In my case vm.paletteColors is an array of strings.

function colorPaletteDragStartCallback(event, $index, color){
         vm.previousIndex = $index;
         vm.selectedColor = color;
     }
function colorPaletteMovedCallback(event, $index){
         var delta = 0;

         //$index = new location of original item
         //1. find first occurrence (FO) of  color
         var firstIndex = vm.paletteColors.indexOf(vm.selectedColor);
         //2. if FO < $index, item moved in front : delta = 1
         //   else, item moved after : delta = 0
         if(firstIndex < $index){
             delta = 1;
         }

         vm.paletteColors.splice($index+delta,1);
     }

It is also worth noting that another way to do this (that can be found in the docs) is to structure your dndlist as an array of objects so that you can add a selected property which gets set during dnd-selected. However according to the docs dnd-selected only fires when an item is clicked and not dragged so I think you would also have to set it during dragging. Then in your moved callback you can filter the list where selected!=true.

decherneyge avatar Jul 13 '17 17:07 decherneyge

@decherneyge I think so too. I use the dnd-inserted callback to capture the destination index. Then I use the dnd-moved callback to figure out the direction in which the item was moved - upwards or downwards.

<ul dnd-list="list" dnd-inserted="setMovedToIndex(index)">
 <li ng-repeat="item in list track by $index" dnd-draggable="item" dnd-moved="updateOrder($index);" dnd-effect-allowed="move">
 function setMovedToIndex(index) {
  movedToIndex = index;
}

function updateOrder(index) {
  movedFromIndex = index;
  if (movedToIndex > movedFromIndex) {
    //item was moved down the list
    movedToIndex = movedToIndex - 1;
    $scope.models.lists.venues.splice(index, 1);
  } else {
   //item was moved up in the list
   $scope.models.lists.venues.splice(index + 1,1); 
  }

satyajeetjadhav avatar Aug 05 '17 09:08 satyajeetjadhav

I can confirm @satyajeetjadhav 's example works well.

mattjegan avatar Oct 30 '17 23:10 mattjegan