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

【问题标题】：How to apply ng2-dnd to background-image?如何将 ng2-dnd 应用于背景图像？
【发布时间】：2018-05-21 14:31:58
【问题描述】：

我正在使用 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;
}

【问题讨论】：

标签： html css angular

【解决方案1】：

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

库的.dnd-sortable-drag 类的问题。应用类时，它会将li 项目缩放到更小的长度。但问题是应用于缩放元素的可拖动功能。这意味着，如果dnd-sortable-drag 的变换值（例如transform: scale(0.5), then dragging functionality of elementli` 的大小为被缩放元素的大小，您只能从缩放版本区域开始拖动元素。
因此，解决方法是将变换值更改为项目大小：

.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

【讨论】：

【解决方案2】：

要实现上下图像的拖动，请将其指定为ullist-style-image，它将标准列表项目符号替换为您的图像，然后它是可拖动的。你在 css 中这样做：

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

如果这不是您想要的，请同时发布 coordinateOptionsList CSS 类，以查看您在 ul 元素上的内容。

【讨论】：