Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 1x 1x | <template> <div v-if="configurationList && configurationList.length > 0"> <p>Capability Configuration:</p> <ul> <li v-for="(value, key) in configurationList" :key="key" draggable="true" style="cursor: move" :class="{ 'drag-over': key === draggedOverIndex }" @dragstart="handleDragStart(key, $event)" @dragover="handleDragOver(key, $event)" @dragleave="handleDragLeave(key, $event)" @drop="handleDrop(key, $event)" @dragend="handleDragEnd" > <span v-if="value.necessary"> <input type="checkbox" disabled :checked="1" > <label for="checkbox"><strong>{{ value.name }}</strong></label> <i> necessary</i> </span> <span v-else> <input type="checkbox" :checked="value.checked" > <label for="checkbox"><strong>{{ value.name }}:</strong></label> </span> </li> </ul> </div> </template> <script setup> import { ref, watch } from 'vue'; import { useStore } from 'vuex' const store = useStore() const configurationList = ref([]); const props = defineProps({ selectedcapability: { type: Object, default: null, }, }); const draggedOverIndex = ref(null); watch(() => props.selectedcapability, async () => { if (props.selectedcapability && props.selectedcapability.json) { configurationList.value = JSON.parse(props.selectedcapability.json) } else { configurationList.value = null } }, { deep: true } ); watch(() => configurationList.value, async () => { saveConfigurationList(configurationList.value) }, { deep: true } ); let draggedItemIndex = null; const handleDragStart = (index, event) => { draggedItemIndex = index; event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/plain', draggedItemIndex); } const handleDragOver = (index, event) => { event.preventDefault(); draggedOverIndex.value = index; } const handleDragLeave = () => { draggedOverIndex.value = null; } const saveConfigurationList = (configurationList) => { if (configurationList != null) { const index = store.state.configlist.findIndex(obj => obj.id === props.selectedcapability.id && obj.capability === props.selectedcapability.capability); if (index !== -1) { store.state.configlist[index].json = JSON.stringify(configurationList) } } } const handleDrop = (index, event) => { event.preventDefault(); const droppedItemIndex = event.dataTransfer.getData('text/plain'); const itemToMove = configurationList.value[droppedItemIndex]; const currentIndex = configurationList.value.findIndex(item => item.id === index); configurationList.value.splice(droppedItemIndex, 1); configurationList.value.splice(currentIndex, 0, itemToMove); draggedOverIndex.value = null; } const handleDragEnd = () => { draggedItemIndex = null; } </script> <style scoped> li.drag-over { background-color: #cbc7c7; border-bottom: 2px dashed #333; } </style> |