Как применить ng2-dnd к background-image?

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

Я бы хотел, чтобы пользователь мог перетаскивать текст или перетаскивая синие стрелки. (Было бы хорошо, если бы они могли также флажок также, пока щелчок все еще проверяет / снимает его)

Проблема с классом .dnd-sortable-drag библиотеки. При применении класса он масштабирует элемент li на меньшую длину. Но проблема в перетаскиваемой функциональности, примененной к масштабируемому элементу. Это означает, что если значение преобразования dnd-sortable-drag, например, transform: scale(0.5), then dragging functionality of element 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

Answer 2

Чтобы выполнить перетаскивание вверх-вниз по изображению, укажите его как ul list-style-image, который заменяет стандартные маркеры списка на ваше изображение, а затем его можно перетаскивать.Вы делаете это в CSS следующим образом:

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

Если это не то, что вам нужно, пожалуйста, опубликуйте также класс coordinateOptionsList CSS, чтобы увидеть, что у вас есть в элементе ul.