ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-01 15:10:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added drag image and grab cursor

Browse Source
This commit is contained in:
Joel McKinnon 2020-01-28 16:31:01 -08:00
parent bc9cadaa77
commit c977c64139
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/plugins/condition/components/ConditionEdit.vue
View File

@ -1,16 +1,15 @@
<template> <template>
<div v-if="condition" <div v-if="condition"
:data-condition-index="conditionIndex"
class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper" class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper"
:class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]" :class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
:draggable="!condition.isDefault"
@dragstart="dragStart"
@dragover.stop
> >
<div class="title-bar"> <div class="title-bar">
<span <span class="c-c__menu-hamburger"
class="c-c__menu-hamburger" :class="{ 'is-enabled': !condition.isDefault }"
:class="{ 'is-enabled': !condition.isDefault }" :data-condition-index="conditionIndex"
:draggable="!condition.isDefault"
@dragstart="dragStart"
@dragover.stop
></span> ></span>
<span <span
class="is-enabled flex-elem" class="is-enabled flex-elem"
@ -204,8 +203,6 @@ export default {
this.conditionClass = new ConditionClass(this.condition, this.openmct); this.conditionClass = new ConditionClass(this.condition, this.openmct);
this.conditionClass.on('conditionResultUpdated', this.handleConditionResult.bind(this)); this.conditionClass.on('conditionResultUpdated', this.handleConditionResult.bind(this));
})); }));
this.dragGhost = document.getElementById('js-c-drag-ghost');
}, },
updated() { updated() {
if (this.isCurrent && this.isCurrent.key === this.condition.key) { if (this.isCurrent && this.isCurrent.key === this.condition.key) {
@ -215,6 +212,8 @@ export default {
}, },
methods: { methods: {
dragStart(e) { dragStart(e) {
e.dataTransfer.effectAllowed = "copyMove";
e.dataTransfer.setDragImage(e.target.closest('.c-c-container__container'), 0, 0);
this.$emit('set-move-index', Number(e.target.getAttribute('data-condition-index'))); this.$emit('set-move-index', Number(e.target.getAttribute('data-condition-index')));
}, },
handleConditionResult(args) { handleConditionResult(args) {

7
src/plugins/condition/components/condition.scss
View File

@ -137,7 +137,14 @@
} }
} }
.c-c__menu-hamburger { .c-c__menu-hamburger {
&:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
&:before { &:before {
content: $glyph-icon-menu-hamburger; content: $glyph-icon-menu-hamburger;
} }