Drop over another table row instead of dropping in between rows
thrinay opened this issue · 5 comments
Hello,
I would be glad if we could drop over a table row instead of dropping in between table rows.
My code looks as follows:
<tbody ng-repeat="fields in xyzTableData.record.treatment_classes|orderBy:sortKeyLineID track by $index" style="cursor: move;overflow-y: scroll" ng-init="rowIndex = $index">
<tr>
<td>
<i ng-if="!fields.showData"
class="glyphicon glyphicon-hand-up btn btn-default btn-circle"
ng-click="fields.showData = true;"></i>
<i ng-if="fields.showData"
ng-click="fields.showData = false;"
class="glyphicon glyphicon-hand-down btn btn-default btn-circle"></i>
</td>
</tr>
</tbody>
</table>
<tbody ng-repeat="fields in behandlungsTableData.record.sessions|orderBy:sortKeyLineID track by $index" style="cursor: move;overflow-y: scroll" ng-init="rowIndex = $index">
<tr>
<td >
<span>
<button type="button" class="btn btn-success btn-xs btn-circle"
ng-click="addLineItem($index+1)"><span
class="glyphicon glyphicon-plus"></span></button>
</span>
<span>
<!--<button type="button" class="btn btn-danger btn-xs btn-circle" data-toggle="modal" data-target="#myModal"
ng-click="removeLineItem($index)"><span
class="glyphicon glyphicon-minus"></span></button>-->
<button type="button" class="btn btn-danger btn-xs btn-circle"
ng-click="removeLineItem($index)"><span
class="glyphicon glyphicon-minus"></span></button>
</span>
</td>
</tr>
<tr ng-if="!fields.showData">
<td colspan="12">
<table ui-sortable="sortableOptionsNested" ng-model="fields.procedure_classes" class="table table-hover listNested connector">
<thead>
<tr class="bg-info">
<th ng-repeat="(key, value) in behandlungsTableData.lkParentHeader">{{value.text || value}}</th>
<th> Leistungen </th>
</tr>
</thead>
<tbody ng-repeat="data in fields.procedure_classes" >
<tr>
<td>{{data.name}} </td>
<td>
<img ng-src="{{data.status == true && 'images/GreenTick_green_16px.svg' || 'images/redTick.svg'}} "/>
</td>
<td>
<i ng-if="data.showData"
class="glyphicon glyphicon-hand-up btn btn-default btn-circle"
ng-click="data.showData = false;"></i>
<i ng-if="!data.showData"
ng-click="data.showData = true;"
class="glyphicon glyphicon-hand-down btn btn-default btn-circle"></i>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Javascript:
$scope.sortableOptions = {
placeholder: 'placeholder',
tolerance: 'pointer',
cursor: 'move',
revert: 'invalid',
dropOnEmpty: true,
revertDuration: 100
};
/*Sorting call for procedure classes */
$scope.sortableOptionsNested = {
placeholder: 'placeholder',
tolerance: 'pointer',
cursor: 'move',
revert: 'invalid',
dropOnEmpty: true,
revertDuration: 100,
connectWith: '.connector'
// stop: $rootScope.$broadcast('orderChanged',{})
};
/*Sorting call for procedures in procedure_classes */
$scope.sortableOptionsProceduresNested = {
placeholder: 'placeholder',
tolerance: 'pointer',
cursor: 'move',
revert: 'invalid',
dropOnEmpty: true,
revertDuration: 100
};
$scope.dropzoneFields = [];
$scope.dragging = false;
/*Sorting call for treatment class */
$scope.sortableTreatmentClass = {
placeholder: 'placeholder',
tolerance: 'pointer',
cursor: 'move',
revert: 'invalid',
dropOnEmpty: true,
revertDuration: 100,
connectWith: '.dropzone, .connectorLines',
start: function (e, ui) {
$scope.$apply(function () {
$scope.dragging = true
});
$('.connectorLines').sortable('refresh');
$('.dropzone').sortable('refresh');
},
update: function (e, ui) {
if (ui.item.sortable.droptarget[0].classList[0] !== "dropzone" || ui.item.sortable.droptarget[0].classList[0] !== "connectorLines")
ui.item.sortable.cancel();
},
stop: function (e, ui) {
if (ui.item.sortable.droptarget == undefined) {
$scope.$apply($scope.dragging = false);
return;
} else if (ui.item.sortable.droptarget[0].classList[0] == "dropzone" || ui.item.sortable.droptarget[0].classList[0] == "connectorLines") {
// run code when item is dropped in the dropzone
$scope.$apply($scope.dragging = false);
} else {
$scope.$apply($scope.dragging = false);
}
}
};
$scope.dropzone = {};
$scope.connectorLines = {};
Issue that am facing: When am trying to drag over a table row it always cautions me to drop between table rows but not over a table row. I would be glad if this could be helped out. Thanks a ton in advance,
Since this is a sorting plugin, moving a row would result it to be placed above or below an other row.
Where do you expect the dragged item to be placed?
Firstly, thanks a ton for such fast response.
Moving on, Whenever it is dragged over a row, then I would make an api call that certain row is dragged over a row, If it is moved on top or below the row, then we should be able to add in between a row. That was the prime intention
We support all jquery-ui-sortable callbacks, but I think that this use case is not covered by that API at all. If in the mean you find a workaround to make it work on jquery-ui-sortable then it should almost definitely work with angular-ui-sortable.
Isn't it possible to make an api call when dragged to a specific row by attaching a dropping zone? If yes please let me know thank you
Seems possible but then you might also have to cancel the drops on the row, depending on your use case.