Как изменить эффект перетаскивания при использовании перетаскивания HTML5?

Question

Я использую angularJS для своего веб-приложения, и мне нужно написать компонент, содержащий операцию перетаскивания. Когда я пытался достичь цели, мне было трудно контролировать эффект перетаскивания вокруг указателя, поскольку это был не реальный элемент, а вырезанное изображение (я полагаю). На данный момент перетаскиваемое изображение является копией перетаскиваемого элемента и содержит эффект наведения, и даже имеет белый фон от своего родителя. (Я вырезал два изображения и отобразил ниже)

Так как я могу изменить эффект перетаскивания с помощью CSS или JS?

Я добавляю класс «перетаскивание» для перетаскиваемого элемента при срабатывании события dragstart и изменяю стиль перетаскиваемого элемента. Но перетаскиваемое изображение остается прежним.

HTML

<div ng-if="current == -1" class="form-library">
    <div ng-repeat="(key, item) in formMap"
         class="form-type-items"
         ng-class="{'is-dragging': dragInfo.type == 'add' && key == dragInfo.data.type}"
         draggable="true"
         ng-dragstart="onDragStart($event, key)"
         ng-dragend="onDragEnd($event)">
         <div class="form-type-icon">
             <i class="{{'iconfont icon-'+item.icon}}"></i>
         </div>
         <span class="form-type-name">{{ item.name }}</span>
    </div>
</div>

* 1016 СКС *

&:hover {
    .form-type-name {
        color: $brand-color-1;
    }
    .form-type-icon {
        .iconfont {
            color: $brand-color-1;
        }
    }
}
&.is-dragging {
   opacity: 0.36;
   background-color: transparent;
   .form-type-name {
       color: $gray-2;
   }
   .form-type-icon {
       .iconfont {
           color: $gray-2;
       }
   }
}

Answer 1

Похоже, что стили применяются после начала перетаскивания, поэтому перетаскиваемая визуальная копия является поверхностной копией элемента из экземпляра, когда перетаскивание только началось.В качестве обходного пути вы можете сначала попытаться применить стили, а затем установить атрибут draggable для элемента и удалить его после того, как элемент был освобожден

<div ng-if="current == -1" class="form-library">
    <div ng-repeat="(key, item) in formMap"
            class="form-type-items"
            ng-class="{'is-dragging': dragInfo.type == 'add' && key == dragInfo.data.type}"
            draggable="true"
            on-mousedown="onMouseDown($event, key)"
            on-mouseup="onMouseUp($event)">
            <div class="form-type-icon">
                <i class="{{'iconfont icon-'+item.icon}}"></i>
            </div>
            <span class="form-type-name">{{ item.name }}</span>
    </div>
</div>


<script>
function onMouseDown(e) {
    // set variable that will apply necessary class to TRUE

    // then add draggable attribute
    e.target.setAttribute('draggable', true)
}


function onMouseUp(e) {
    // set variable for drabble class to FALSE

    // then remove draggable attribute
    e.target.setAttribute('draggable', false)
}

</script>