html - 如何将 ng2-dnd 应用于背景图像？

Question

我正在使用 ng2-dnd 模块来实现列表排序。排序和拖动效果很好，除了用户必须通过单击我的元素的文本来拖动。

我希望用户能够拖动文本或拖动蓝色箭头。 (如果他们也可以通过复选框拖动就可以了，只要单击仍然选中/取消选中它)

有没有办法使拖动适用于背景图像？如果不是，我还能如何实现这种行为？

这是我正在使用的 html:

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

还有 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)

库的 .dnd-sortable-drag 类的问题。它在应用类时将 li 元素缩放到更小的长度。但问题是应用于缩放元素的可拖动功能。这意味着，如果 dnd-sortable-drag 的转换值例如 transform: scale(0.5)，则元素的拖动功能li` 将在被调用元素的大小中你只从缩放版本区域开始拖动元素。
因此，解决方法是将转换值更改为元素大小:

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

将转换值更改为 scale(1);:

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

StackBlitz demo