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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.