How to apply ng2-dnd to background-image?

Question

I'm using the ng2-dnd module to implement sorting of a list. The sorting and dragging is working great, except the user must drag by clicking on the text of my element.

I'd like for the user to be able to drag either the text, or by dragging the blue arrows. (It would be okay if they can also drag by the checkbox too, as long as clicking still checks/unchecks it)

Is there a way to make the dragging apply to background images? If not, how else can I achieve this behavior?

Here is the html I am using:

<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 the CSS:

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;
}

Answer 1

I'd like for the user to be able to drag either the text, or by dragging the blue arrows. (It would be okay if they can also drag by the checkbox too, as long as clicking still checks/unchecks it)

The problem with the library's .dnd-sortable-drag class. It scales li item to smaller length when class is applied. But problem is draggable functionality applied to scaled element. It means, if dnd-sortable-drag's transform value for example transform: scale(0.5), then dragging functionality of elementli` will be in size of scalled element and you only start drag element from scaled version area.
So, fix is to change transform value to item size:

.dnd-sortable-drag {    
    transform: scale(0.9); 
    opacity: 0.7;
    border: 1px dashed #000;
}

Change transform value to scale(1);:

.dnd-sortable-drag {
    transform: scale(1); 
    opacity: 0.7;
    border: 1px dashed #000;
}

StackBlitz demo

Answer 2

To achieve the dragging by the up down image specify it as the ul list-style-image which replaces the standard list bullets with your image and then it is dragable. You do it in the css like this:

ul.css-ul-image-bullet {
    list-style-image: url(../images/nud.png);
} 

If this is not what you want please post also the coordinateOptionsList CSS class to see what you have on the ul element.