Problem in dnd-moved
rahi-rajeev opened this issue · 0 comments
rahi-rajeev commented
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;
};