How to allow text to be copied in a ui-sortable table?
imTachu opened this issue · 4 comments
I'm sorry if this has been addressed before, I couldn't find it.
I want to allow users to copy the text inside the rows of a ui-sortable
table. In specific in this case, the pn-custom
directive only contains a span
with text. That is the text I want to allow to be copied.
<table class="table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody ui-sortable="sortableOptions" ng-model="aModel">
<tr ng-repeat="prwd in aModel">
<td><pn-custom id="{{prwd.article_id}}"></pn-custom></td>
<td>{{prwd.label}}</td>
<td>{{prwd.attribute}}</td>
</tr>
</tbody>
</table>
Of what I've read in the README file, I should use a cancel? Is this wrong? Is there any simple way to achieve this that I'm ignoring?
$scope.sortableOptions = {
update: function(e, ui) {
if (ui.item.sortable.span) {
ui.item.sortable.cancel();
}
}
};
The reason why I post this here and not in SO is because if I think this is a simple use case, and if I can fix I would like to document it in the README.md file.
Does the directive handle the coping part or you just need to select the text?
I think that you might need to use a handle.
If you actually need to check the DOM element that was clicked, you can do something like if ($(e.originalEvent.target).is('span')) { /*...*/ }
.
But, since cancel()
only reverts the sorting after the dragging, you might want to take a look at the cancel
option as well.
Any feedback on this?
So sorry! I forgot to tell you, it was solved like this:
<tbody ui-sortable="sortableOptions" ng-model="aModel">
$scope.sortableOptions = {
cancel: 'pn-custom id, .input-sm'
};
To me, it looks very clean and works very well:
- The cursor changes when hovering on the text
- The rest of the row executes the sortable function
WDYT?
Yea, that's exactly what I was thinking of.
👍 for making it work and 👍 for sharing back your findings.