如何将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;
}

- wmebane

Answer 1

我希望用户能够通过拖动文本或蓝色箭头来实现拖放操作。如果点击复选框，仍然需要勾选/取消勾选它，那么用户也可以通过拖动复选框来实现拖放操作。

该库的.dnd-sortable-drag类存在问题。当应用该类时，它会将li项缩小到较小的长度。但问题在于，可拖动功能应用于缩放后的元素。这意味着，如果dnd-sortable-drag的transform值为例如transform: scale(0.5)，那么li元素的拖动功能将处于缩放版本区域的大小，并且您只能从缩放版本区域开始拖动元素。

因此，解决方法是将transform值更改为项的大小。

.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

- Yerkon

Answer 2

为了实现可拖动的上下图像，请将其指定为 ul list-style-image，它将用您的图像替换标准列表符号，然后就可以拖动它了。在CSS中如此实现：

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

如果这不是你想要的，请同时发布coordinateOptionsList CSS类，以查看在ul元素上有什么。

- Aleš Doganoc