Problem in dnd-moved

[rahi-rajeev]

Hi, I just want to implement like jQuery ui sortable -> In case when i drag and drop(I mean move within list) then item add to last in list -->If i remove dnd-drop on parent element then it just rearrange like that but i did not get exact output

Please see this link https://drive.google.com/file/d/1gVuw4PzkfORGpnTVW1bGeRCoPalL3PU6/view?usp=sharing

<div class="col-sm-12 mt-15">
                <div class="box dragdropElement" id="attr-dropElement" dnd-list="prdData.specs_create_list" dnd-drop="dropCallback(index, item, external, type, 'specification')"> 
                    <div class="blank-drag" data-ng-if="prdData.specs_create_list.length === 0">
                        <p class="blank-txt"><i class="glyphicon glyphicon-share-alt"></i> Drag your Attribute drop here</p>
                    </div>
                    <div class="blank-drag drag-attr-table" data-ng-if="prdData.specs_create_list.length">
                      <div class="form-row table" ng-repeat="item in prdData.specs_create_list track by $index" dnd-draggable="item"  dnd-moved="prdData.specs_create_list.splice($index, 1)" dnd-effect-allowed="move">
                          <dnd-nodrag class="select-color-row">
                              <span class="count col"><%$index+1%> </span>
                              <span dnd-handle class="glyphicon col glyphicon-menu-hamburger ui-sortable-handle handle" ></span>
                              <span class="col name"><span class="attr-name"><%item.name%></span></span>
                              <span class="col code"><span class="attr-name"><%item.attribute_code%></span></span>
                             {{-- <span class="pull-right  glyphicon glyphicon-font skyblue" ng-if="item.front_input=='textarea' || item.front_input=='text'"></span>
                              <span class="pull-right glyphicon glyphicon-menu-down" ng-if="item.front_input=='multiselect'"></span>
                              <span class="pull-right glyphicon glyphicon-menu-down" ng-if="item.front_input=='select'"></span>
                              <span class="pull-right glyphicon glyphicon-paperclip" ng-if="item.front_input=='browse_file'"></span>
                              <span class="pull-right glyphicon glyphicon-calendar" ng-if="item.front_input=='date_picker'"></span> --}}
                              <span class="icon-close pull-right" ng-click="_removeSep($event,$index,'specification',item)"></span>
                          </dnd-nodrag>
                      </div>
                    </div>
                </div>
            </div>

js code //drag and drop callback

        $scope.dropCallback = function(index, item, external, type, flag) {
          $scope.$evalAsync(function(){
            // $scope.product.specmodel.push({textVal:null,selectVal:null,textareaVal:null,usevaiant:false,attrselect:null,mulattrselect:null,id:item.id, front_input: item.front_input, required: item.required});
            var indx = $scope.prdData.specslist.findIndex((x) => x.id === item.id );
            if(indx !== -1){
              $scope.prdData.specslist.splice(indx, 1);
            }
            $scope.prdData.specs_create_list.push(item);
          })     
          // Return false here to cancel drop. Return true if you insert the item yourself.
          return true;
        };