I am currently utilizing the ng2-dnd module to enable sorting of a list. While the functionality for sorting and dragging is working smoothly, there's one issue - users can only drag by clicking on the text within my element.
My goal is to allow users to drag either by the text or by using the blue arrows. It would also be acceptable if they could drag by clicking on the checkbox, as long as clicking still functions to check/uncheck it.
If dragging background images is not an option, how else could I achieve this desired behavior?
https://i.stack.imgur.com/HyAO6.png
This is the HTML code I have been employing:
<ul dnd-sortable-container [sortableData]="coordinateSystems" class="coordinateOptionsList">
<li *ngFor="let coordOption of coordinateSystems; let i = index" dnd-sortable [sortableIndex]="i">
<input type="checkbox" name="cbx{{coordOption.displayName}}" id="cbx{{coordOption.displayName}}" class="css-checkbox" [(ngModel)]="coordinateSystems[i].active">
<label for="cbx{{coordOption.displayName}}" class="css-label-sortable">Use {{coordOption.displayName}} Coordinates</label>
<br /><br />
<div class="clear"></div>
</li>
</ul>
And here is the CSS associated with it:
input[type=checkbox].css-checkbox {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=checkbox].css-checkbox + label.css-label-sortable {
padding-left: 44px;
height: 17px;
display: inline-block;
line-height: 19px;
background-repeat: no-repeat;
font-size: 15px;
vertical-align: middle;
cursor: pointer;
float: left;
margin: 10px 0 0 0;
color: #666666;
}
input[type=checkbox].css-checkbox:checked + label.css-label-sortable {
background-position: 0 0, 22px -17px;
}
label.css-label-sortable {
background-image: url(../images/nud.png), url(../images/checkbox.svg);
background-position: 0 0, 22px 0;
}