Bdtjtk

I am using angularJS for my web appliaction, and I need to write a component that contains dragging operation. When I tried to accomplish the goal, I found it hard to control the dragging effect around the pointer, since it was not a real element but an image cut (I assume). For now the dragging image is a copy of the element being drag and contains the hover effect, and even have white background from its parent. (I cut two image and display below)

So how can I modify the dragging effct with css or js?

I add a class "is-dragging" for the element being dragged when dragstart event is trigger, and change the style of the element being drag. But the dragging image just remain the same.

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>

scss

&: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;

       }

   }

}

It looks like styles are applied after the dragging starts so the dragging visual copy is a shallow copy of the element from the instance when the dragging just started. As a work around you can try to first apply styles, and then set draggable attribute on the element, and remove it after an element is been released

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