[英]How to modify the dragging effect when using HTML5 drag-and-drop?
我正在為我的Web應用程序使用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>
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;
}
}
}
看起來好像在拖動開始后就應用了樣式,因此,拖動的可視副本是剛開始拖動時來自實例的元素的淺表副本。 解決方法是,您可以嘗試先應用樣式,然后在元素上設置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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.