diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx
index cd250cbfa5a1..11ee885b25dd 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx
@@ -17,10 +17,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, validateNonEmpty } from '@superset-ui/core';
+import { Metric, t, validateNonEmpty } from '@superset-ui/core';
 import { ExtraControlProps, SharedControlConfig } from '../types';
+import { mainMetric } from '../utils';
 import { TIME_COLUMN_OPTION } from '../constants';
 
+type Control = {
+  savedMetrics?: Metric[] | null;
+  default?: unknown;
+};
+
 export const dndGroupByControl: SharedControlConfig<'DndColumnSelect'> = {
   type: 'DndColumnSelect',
   label: t('Group by'),
@@ -80,3 +86,28 @@ export const dnd_adhoc_filters: SharedControlConfig<'DndFilterSelect'> = {
   }),
   provideFormDataToProps: true,
 };
+
+export const dnd_adhoc_metrics: SharedControlConfig<'DndMetricSelect'> = {
+  type: 'DndMetricSelect',
+  multi: true,
+  label: t('Metrics'),
+  validators: [validateNonEmpty],
+  default: (c: Control) => {
+    const metric = mainMetric(c.savedMetrics);
+    return metric ? [metric] : null;
+  },
+  mapStateToProps: ({ datasource }) => ({
+    columns: datasource ? datasource.columns : [],
+    savedMetrics: datasource ? datasource.metrics : [],
+    datasourceType: datasource?.type,
+  }),
+  description: t('One or many metrics to display'),
+};
+
+export const dnd_adhoc_metric: SharedControlConfig<'DndMetricSelect'> = {
+  ...dnd_adhoc_metrics,
+  multi: false,
+  label: t('Metric'),
+  description: t('Metric'),
+  default: (c: Control) => mainMetric(c.savedMetrics),
+};
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/index.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
index 579c1b2e23db..11948e0c0fc9 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
@@ -58,6 +58,8 @@ import {
 import { ColumnOption } from '../components/ColumnOption';
 import {
   dnd_adhoc_filters,
+  dnd_adhoc_metric,
+  dnd_adhoc_metrics,
   dndColumnsControl,
   dndEntity,
   dndGroupByControl,
@@ -482,8 +484,8 @@ const label_colors: SharedControlConfig<'ColorMapControl'> = {
 const enableExploreDnd = isFeatureEnabled(FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP);
 
 const sharedControls = {
-  metrics,
-  metric,
+  metrics: enableExploreDnd ? dnd_adhoc_metrics : metrics,
+  metric: enableExploreDnd ? dnd_adhoc_metric : metric,
   datasource: datasourceControl,
   viz_type,
   color_picker,
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/types.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/types.ts
index 9d5b91d5fbb7..812852f71a6f 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/types.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/types.ts
@@ -137,6 +137,7 @@ export type InternalControlType =
   | 'FilterBoxItemControl'
   | 'DndColumnSelect'
   | 'DndFilterSelect'
+  | 'DndMetricSelect'
   | keyof SharedControlComponents; // expanded in `expandControlConfig`
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any