Making a marker clickable and draggable (feature with geompoint)

[MatthieuGomes]

Hi everyone,

I'm having a hard time trying to make a "marker" (a feature) clickable and draggable... Can someone give me a hint ? here is my code for markers and map.

Map

<template>
    <OlMap tabindex="0" id="map" @click="handleMapClick" @keydown.escape="clickedPosition = [NaN, NaN]">
        <OlView :center="[props.startLng, props.startLat]" :zoom="props.startZoom" :maxZoom="props.maxZoom"
            projection="EPSG:4326" />
        <OlTileLayer>
            <OlSourceXyz url="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
        </OlTileLayer>
        <OlVectorLayer :zIndex="1">
            <OlSourceVector>
                <MapMarker :position="[startLng, startLat]"></MapMarker>
                <MapMarker :position="[startLng + 0.002, startLat + 0.0003]"></MapMarker>
            </OlSourceVector>
        </OlVectorLayer>
        <AdditionPopup v-if="!isNaN(clickedPosition[0]) && !isNaN(clickedPosition[1])"
            :clicked-position="clickedPosition" />

    </OlMap>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import AdditionPopup from './PopUps/AdditionPopup.vue';
import MapMarker from './MapMarker.vue';
import store from '@/store';
import eventListener from '@/technicals/eventBus';


// props
const props = defineProps({
    startLat: {
        type: Number,
        default: 51.505
    },
    startLng: {
        type: Number,
        default: -0.09
    },
    startZoom: {
        type: Number,
        default: 13
    },
    maxZoom: {
        type: Number,
        default: 19
    }
});
// data
const globalStates = store.state.global;

const clickedPosition = ref([NaN, NaN]);


// lifecycle hooks
onMounted(() => {
    eventListener.$on('closePopup', () => {
        clickedPosition.value = [NaN, NaN];
    });
});
onUnmounted(() => {
    eventListener.$off('closePopup');
});

// methods
function handleMapClick(event) {
    console.log("Map clicked at:", event.coordinate);
    clickedPosition.value = event.coordinate;
}


</script>

<style scoped>
#map {
    height: 100dvh;
    flex: 1;
    z-index: 0;
}
</style>

MapMarker

<template>
    <ol-feature>
        <ol-geom-point :coordinates="props.position" @click="console.log('markerClicked')"></ol-geom-point>
        <ol-style>
            <ol-style-icon :src="props.icon" :scale="props.scale"></ol-style-icon>
        </ol-style>
    </ol-feature>
</template>

<script setup>
import { defineProps } from 'vue';

// props
const props = defineProps({
    position: {
        type: Array,
        default: () => [0, 0]
    },
    icon: {
        type: String,
        default: 'https://openlayers.org/en/latest/examples/data/icon.png'
    },
    scale: {
        type: Number,
        default: 1
    },
    actionRadius: {
        type: Number,
        default: NaN
    },
    isDraggable: {
        type: Boolean,
        default: true
    }
});
</script>

Thank you by advance !