How to implement drag and drop?

[apoorv569]

I'm trying to implement drag and drop by looking at the example form the repository but can't understand how would it work for my use case.

I basically have a side panel which shows a file tree of all the files and directories on the system using CollapsibleStates and SelectableLabels. I want to be able to drag "files/directories" to another widget, which is a Table, filling up every column with the individual file's metadata one file per row..

Here is what I tried so far,

This is form side_panel.rs

    fn directory_browser(&self, ui: &mut egui::Ui, path: &std::path::Path, dnd: &mut Dnd) {
        if let Ok(entries) = std::fs::read_dir(path) {
            entries.filter_map(|entry| entry.ok()).for_each(|entry| {
                let path = entry.path();

                let file_tree_id = egui::Id::new("file_tree_")
                    .with(entry.file_name().to_string_lossy())
                    .with(entry.path().to_string_lossy());

                // let mut dnd = Dnd::default();

                let source_col: Option<(usize, usize)> = None;
                let drop_col: Option<usize> = None;

                let mut samples: Vec<Sample> = Vec::new();

                Dnd::drag_source(ui, file_tree_id, |ui| {
                    if path.is_dir() {
                        egui::collapsing_header::CollapsingState::load_with_default_open(
                            ui.ctx(),
                            file_tree_id,
                            false,
                        )
                        .show_header(ui, |ui| {
                            let directory = ui.selectable_label(
                                false,
                                format!("📁 {}", entry.file_name().to_string_lossy()),
                            );

                            samples.push(Sample::new(
                                format!("{}", entry.file_name().to_string_lossy()),
                                format!("{}", entry.file_name().to_string_lossy()),
                                format!("{}", entry.file_name().to_string_lossy()),
                                2,
                                132,
                                "00:32".to_string(),
                                44100,
                                51243,
                                format!("{}", entry.path().to_string_lossy()),
                            ));

                            if directory.hovered() {
                                ui.ctx().set_cursor_icon(egui::CursorIcon::Grab);
                            }

                            let dir_sense = directory.interact(egui::Sense::click_and_drag());

                            if dir_sense.dragged() {
                                log::debug!("Directory is being dragged..");

                                ui.ctx().set_cursor_icon(egui::CursorIcon::Grabbing);
                            }

                            if dir_sense.drag_started() {
                                dnd.set_drag_id(file_tree_id);
                                dnd.set_payload_type(Payload::SampleDir);
                                dnd.set_payload(samples);
                            }
                        })
                        .body(|ui| {
                            self.directory_browser(ui, &path, dnd);
                        });
                    } else {
                        let file = ui.selectable_label(
                            false,
                            format!("📄 {}", &entry.file_name().to_string_lossy()),
                        );

                        samples.push(Sample::new(
                            format!("{}", entry.file_name().to_string_lossy()),
                            format!("{}", entry.file_name().to_string_lossy()),
                            format!("{}", entry.file_name().to_string_lossy()),
                            2,
                            132,
                            "00:32".to_string(),
                            44100,
                            51243,
                            format!("{}", entry.path().to_string_lossy()),
                        ));

                        if file.hovered() {
                            ui.ctx().set_cursor_icon(egui::CursorIcon::Grab);
                        }

                        let file_sense = file.interact(egui::Sense::click_and_drag());

                        if file_sense.dragged() {
                            log::debug!("File is being dragged..");

                            ui.ctx().set_cursor_icon(egui::CursorIcon::Grabbing);
                        }

                        if file_sense.drag_started() {
                            dnd.set_drag_id(file_tree_id);
                            dnd.set_payload_type(Payload::SampleFile);
                            dnd.set_payload(samples);
                        }
                    }
                });
            });
        }
    }

This is from sample_viewer.rs (the table widget)

    pub fn render(&mut self, ui: &mut egui::Ui, dnd: &mut Dnd) {
        let text_height = egui::TextStyle::Body
            .resolve(ui.style())
            .size
            .max(ui.spacing().interact_size.y);

        // let mut dnd = Dnd::default();

        // let mut source_col_row = None;
        // let mut drop_col = None;

        let file_tree_id = dnd.get_drag_id().unwrap_or("file_tree_".into());

        let payload_type = dnd.get_payload_type();
        let is_payload_valid = dnd.is_payload_valid(payload_type);

        let mut samples = Vec::default();

        if is_payload_valid {
            log::debug!("Paylad type valid, getting the payload");

            samples = dnd.get_payload();
        }

        self.number_of_samples = samples.len();

        Dnd::drop_target(ui, true, |ui| {
            ui.push_id(self.id, |ui| {
                let mut table = TableBuilder::new(ui)
                    .sense(egui::Sense::click())
                    .striped(true)
                    .cell_layout(egui::Layout::left_to_right(egui::Align::Center))
                    .column(Column::auto())
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::remainder())
                    .min_scrolled_height(0.0);

                if let Some(row_index) = self.scroll_to_row.take() {
                    table = table.scroll_to_row(row_index, Some(egui::Align::Center));
                }

                table
                    .header(20.0, |mut header| {
                        header.col(|ui| {
                            ui.strong("⭐");
                        });
                        header.col(|ui| {
                            ui.strong("Filename");
                        });
                        header.col(|ui| {
                            ui.strong("Sample Pack");
                        });
                        header.col(|ui| {
                            ui.strong("Type");
                        });
                        header.col(|ui| {
                            ui.strong("Channels");
                        });
                        header.col(|ui| {
                            ui.strong("BPM");
                        });
                        header.col(|ui| {
                            ui.strong("Length");
                        });
                        header.col(|ui| {
                            ui.strong("Sample Rate");
                        });
                        header.col(|ui| {
                            ui.strong("Bitrate");
                        });
                        header.col(|ui| {
                            ui.strong("Path");
                        });
                    })
                    .body(|body| {
                        body.rows(text_height, 50, |mut row| {
                            row.set_selected(self.selection.contains(&row.index()));

                            row.col(|ui| {
                                if ui
                                    // .selectable_label(self.is_row_selected, "⭐")
                                    .selectable_value(&mut self.is_row_selected, true, "⭐")
                                    .clicked()
                                {
                                    log::debug!("Favorite clicked: {}", self.is_row_selected);
                                };
                            });
                            samples.clone().into_iter().for_each(|sample| {
                                row.col(|ui| {
                                    ui.label(sample.get_filename().unwrap());
                                });
                                row.col(|ui| {
                                    ui.label(sample.get_sample_pack().unwrap());
                                });
                                row.col(|ui| {
                                    ui.label(sample.get_sample_type().unwrap());
                                });
                                row.col(|ui| {
                                    ui.label(sample.get_channels().unwrap().to_string());
                                });
                                row.col(|ui| {
                                    ui.label(sample.get_bpm().unwrap().to_string());
                                });
                                row.col(|ui| {
                                    ui.label(sample.get_length().unwrap());
                                });
                                row.col(|ui| {
                                    ui.label(sample.get_sample_rate().unwrap().to_string());
                                });
                                row.col(|ui| {
                                    ui.label(sample.get_bitrate().unwrap().to_string());
                                });
                                row.col(|ui| {
                                    ui.label(sample.get_path().unwrap());
                                });
                            });

                            self.toggle_row_selection(row.index(), &row.response());

                            // if ui.memory(|mem| mem.is_being_dragged(file_tree_id)) {
                            //     source_col_row = Some((row.index(), row.col_index()));
                            // }
                        })
                    });
            });
        });
        // .response;

        // let response = response.context_menu(|ui| {
        //     if ui.button("New Item").clicked() {
        //         self.columns[col_idx].push("New Item".to_owned());
        //         ui.close_menu();
        //     }
        // });

        // let is_being_dragged = ui.memory(|mem| mem.is_anything_being_dragged());

        // if is_being_dragged && is_payload_valid && response.hovered() {
        //     drop_col = Some(samples[0].get_filename());
        // }

        // if let Some((source_col, source_row)) = source_col_row {
        //     if let Some(drop_col) = drop_col {
        //         if ui.input(|i| i.pointer.any_released()) {
        //             // do the drop:
        //             let item = &samples[source_col]; //.remove(source_row);
        //             samples.push(item.clone());
        //         }
        //     }
        // }
    }

I created my own drag_and_drop.rs file which has the functions from the example plus a little extra,

here is the drag_and_drop.rs

use super::samples::Sample;
use eframe::{egui, epaint};

const OVERLAY_NORMAL_DARK: egui::Color32 = egui::Color32::from_rgba_premultiplied(0, 0, 0, 180);
const OVERLAY_NORMAL_LIGHT: egui::Color32 = egui::Color32::from_rgba_premultiplied(0, 0, 0, 50);
const TEXT_COLOR_DARK: egui::Color32 = egui::Color32::from_rgba_premultiplied(255, 255, 255, 255);
const TEXT_COLOR_LIGHT: egui::Color32 = egui::Color32::from_rgba_premultiplied(0, 0, 0, 255);

// pub static mut DRAGGED_ID: Option<egui::Id> = None;

// TODO: Fix drag_id to be only used when dragging.

#[derive(Clone)]
pub enum Payload {
    Invalid(String),
    SampleDir,
    SampleFile,
}

pub struct Dnd {
    drag_id: Option<egui::Id>,
    payload: Vec<Sample>,
    payload_type: Payload,
    can_accept_payload: bool,
}

impl Default for Dnd {
    fn default() -> Self {
        Self {
            // drag_id: Some(egui::Id::new("drag_source")),
            drag_id: None,
            payload: Vec::new(),
            payload_type: Payload::Invalid("Error! Invalid payload type.".to_string()),
            can_accept_payload: false,
        }
    }
}

impl Dnd {
    pub fn is_payload_valid(&mut self, payload_type: Payload) -> bool {
        match payload_type {
            Payload::Invalid(ref err) => {
                log::error!("{}", err);
                self.can_accept_payload = false;
            }
            Payload::SampleDir => {
                log::info!("Payload type SampleDir");
                self.can_accept_payload = true;
            }
            Payload::SampleFile => {
                log::info!("Payload type SampleFile");
                self.can_accept_payload = true;
            }
        }

        self.can_accept_payload
    }

    pub fn drag_source(ui: &mut egui::Ui, id: egui::Id, body: impl FnOnce(&mut egui::Ui)) {
        let is_being_dragged = ui.memory(|mem| mem.is_being_dragged(id));

        if !is_being_dragged {
            let response = ui.scope(body).response;

            // Check for drags:
            let response = ui.interact(response.rect, id, egui::Sense::drag());

            if response.hovered() {
                ui.ctx().set_cursor_icon(egui::CursorIcon::Grab);
            }
        } else {
            ui.ctx().set_cursor_icon(egui::CursorIcon::Grabbing);

            // Paint the body to a new layer:
            let layer_id = egui::LayerId::new(egui::Order::Tooltip, id);
            let response = ui.with_layer_id(layer_id, body).response;

            // Now we move the visuals of the body to where the mouse is.
            // Normally you need to decide a location for a widget first,
            // because otherwise that widget cannot interact with the mouse.
            // However, a dragged component cannot be interacted with anyway
            // (anything with `Order::Tooltip` always gets an empty [`Response`])
            // So this is fine!

            if let Some(pointer_pos) = ui.ctx().pointer_interact_pos() {
                let delta = pointer_pos - response.rect.center();
                ui.ctx().translate_layer(layer_id, delta);
            }
        }
    }

    pub fn drop_target<R>(
        ui: &mut egui::Ui,
        can_accept_what_is_being_dragged: bool,
        body: impl FnOnce(&mut egui::Ui) -> R,
    ) -> egui::InnerResponse<R> {
        let is_being_dragged = ui.memory(|mem| mem.is_anything_being_dragged());

        let margin = egui::Vec2::splat(4.0);

        let outer_rect_bounds = ui.available_rect_before_wrap();
        let inner_rect = outer_rect_bounds.shrink2(margin);
        let where_to_put_background = ui.painter().add(egui::Shape::Noop);
        let mut content_ui = ui.child_ui(inner_rect, *ui.layout());
        let ret = body(&mut content_ui);
        let outer_rect =
            egui::Rect::from_min_max(outer_rect_bounds.min, content_ui.min_rect().max + margin);
        let (rect, response) = ui.allocate_at_least(outer_rect.size(), egui::Sense::hover());

        // let style = if is_being_dragged && can_accept_what_is_being_dragged && response.hovered() {
        //     ui.visuals().widgets.active
        // } else {
        //     ui.visuals().widgets.inactive
        // };

        if is_being_dragged && can_accept_what_is_being_dragged {
            egui::Area::new("area_id")
                .interactable(true)
                .fixed_pos(egui::Pos2::ZERO)
                .show(ui.ctx(), |ui| {
                    let area_response = ui.allocate_response(rect.size(), egui::Sense::drag());

                    if ui.visuals().dark_mode {
                        ui.painter()
                            .rect_filled(rect, egui::Rounding::ZERO, OVERLAY_NORMAL_DARK);
                    } else {
                        ui.painter()
                            .rect_filled(rect, egui::Rounding::ZERO, OVERLAY_NORMAL_LIGHT);
                    }
                });

            if ui.visuals().dark_mode {
                ui.painter().text(
                    [
                        (rect.min.x + rect.max.x) / 2.0,
                        (rect.min.y + rect.max.y) / 2.0,
                    ]
                    .into(),
                    egui::Align2::CENTER_CENTER,
                    "Drop files here..",
                    egui::FontId::proportional(30.0),
                    TEXT_COLOR_DARK,
                );
            } else {
                ui.painter().text(
                    [
                        (rect.min.x + rect.max.x) / 2.0,
                        (rect.min.y + rect.max.y) / 2.0,
                    ]
                    .into(),
                    egui::Align2::CENTER_CENTER,
                    "Drop files here..",
                    egui::FontId::proportional(30.0),
                    TEXT_COLOR_LIGHT,
                );
            }

            response.request_focus();
            ui.ctx().move_to_top(response.layer_id);
        }

        // let mut fill = style.bg_fill;
        // let mut stroke = style.bg_stroke;

        // if is_being_dragged && !can_accept_what_is_being_dragged {
        //     fill = ui.visuals().gray_out(fill);
        //     stroke.color = ui.visuals().gray_out(stroke.color);
        // }

        // ui.painter().set(
        //     where_to_put_background,
        //     epaint::RectShape::new(rect, style.rounding, fill, stroke),
        // );

        egui::InnerResponse::new(ret, response)
    }

    pub fn set_drag_id(&mut self, id: egui::Id) {
        // Dnd::default().drag_id = Some(id);
        self.drag_id = Some(id);
    }

    pub fn get_drag_id(&self) -> Option<egui::Id> {
        self.drag_id
    }

    pub fn get_payload_type(&self) -> Payload {
        self.payload_type.clone()
    }

    pub fn set_payload(&mut self, payload: Vec<Sample>) {
        self.payload = payload;
    }

    pub fn set_payload_type(&mut self, payload_type: Payload) {
        self.payload_type = payload_type;
    }

    pub fn get_payload(&self) -> Vec<Sample> {
        self.payload.to_vec()
    }
}

I'm passing dnd as an argument to both the directory_browser and sample_viewer which I pass in the update() in app.rs,

pub struct App {
    // bunch of other stuff..
    dnd: Dnd,
}

impl App {
    pub fn new() -> Self {
        Self {
            // bunch of other stuff..
            dnd: Dnd::default(),
        }
    }

impl eframe::App for App {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        // Set the theme
        // if self.dark_mode {
        //     ctx.set_visuals(egui::Visuals::dark())
        // } else {
        //     ctx.set_visuals(egui::Visuals::light())
        // }

        if !self.style_set {
            ctx.set_style(self.style(ctx, false));
        }

        self.style_set = true;

        // Set custom keybindings
        self.process_key_press(ctx);

        // Render header bar if enabled
        if !self.preferences_dialog.use_system_window_header() && !self.is_window_fullscreen {
            egui::TopBottomPanel::top("header_bar")
                .show_separator_line(true)
                .show_animated(ctx, true, |ui| {
                    // self.header_bar_widgets(ui, frame);
                    self.header_bar_widgets(ui);
                });
        }

        // let mut dnd = Dnd::default();

        self.side_panel.render(ctx, &mut self.dnd);
        self.waveform_viewer.render(ctx);

        egui::CentralPanel::default().show(ctx, |ui| {
            // Render side panel
            // self.side_panel.render(ui);

            // Render waveform viewer
            // self.waveform_viewer.render(ctx, ui);

            // Render control bar
            self.render_control_bar(ui, ctx);

            // Render sample viewer
            self.sample_viewer.render(ui, &mut self.dnd);

            // Render about dialog
            self.about_dialog.render(ctx, ui);

            // Render preferences dialog
            if self.preferences_dialog.is_open() {
                self.preferences_dialog.render(ctx, ui);
            }

            // Render file picker dialog
            if self.file_picker_dialog.is_open() {
                self.file_picker_dialog.render(ctx);
            }
        });
    }

Sample is just a struct,

#[derive(Default, Clone)]
pub struct Sample {
    filename: String,
    sample_pack: String,
    sample_type: String,
    channels: u8,
    bpm: u16,
    length: String,
    sample_rate: u32,
    bitrate: u32,
    path: String,
}

with a bunch of get and set methods for getting and/or setting individual fields..

Am I even on the right track?

ATM it just shows correct cursors and animations nothing else,
https://github.com/emilk/egui/assets/53279454/18cd84a2-99d3-4438-ba11-6f7331d71a4c

This project is a re-write of my older project https://gitlab.com/samplehive/sample-hive

Here's a peek of what I basically want,
https://github.com/emilk/egui/assets/53279454/8859c35b-d539-4f82-abe1-69ac48739e6f

[emilk]

There's a drag-and-drop example on egui.rs. Here's the source: https://github.com/emilk/egui/blob/master/crates/egui_demo_lib/src/demo/drag_and_drop.rs

[apoorv569]

Hi, thank for you for the response.

I have a couple of questions,

1. What does a "Location" here refers to? a widget? like the Table in my case?

2. In your code you have loc.clone() in the println statement, it would help more if I could also see where it comes from in the code (it helps if I can visualize the problem).

3. You said

   The reason the example has sources inside of drop zones is because sources go inside drop zones when they're not moving. If that weren't the case then you would have something that could be dragged from its initial position into a drop zone, but then it would never be able to go back to where it started (I haven't tried doing this, but if I understand the idea correctly it would work like that).

   I'm not sure what you mean by "when they're not moving"?

4. Also

   Getting back to your initial question: it sounds like what you need to do is just make some space in your table into a drop zone, and when you handle the payload being released run whatever logic will copy in the metadata. You'll receive something like a Location, and work out what was dropped from that.

   What do you mean by "make some space in your table into a drop zone"? I currently have my entire Table wrapped with dnd_drop_zone?

To simplify, I basically have a SidePanel in which I render a tree like structure which basically shows the directory structure, like every IDE/Editor has a side panel which shows the structure of the project, except mine is for entire drive the user has. And then I have the Table widget rendered on a CentralPanel. So in my case the I wanna be able to drag "files" or "directories" process the files being dragged to get their metadata and add them to the table rows filling each column with each metadata field. So my drop_zone is suppose to be the Table and my drag_source is supposed to be the widget on the SidePanel.

Sorry, but I have not used a DND API like egui before. I have used imgui one, and that just stores the payload internally and we can retrieve it by an id we give to the widget.

[j-n-f]

No worries, it's my first time using it as well.

1. Location is similar to the type used in the example. You need to have some type common to your draggables and drop zones or else egui won't see them as compatible (this is a very important point). The idea is that when something gets dropped/hovered on a drop zone, you will receive the value that was associated with the draggable. This is because dnd_drag_source accepts a value of that type as argument (in the api docs this is what the Payload type is).
2. As outlined above, the definition of Location isn't really important. I just have a struct with row and column.
3. "when they're not moving" == "when they're not being dragged"; If I were to use a metaphor: you have plates and cookies. Plates are drop zones, cookies are drag sources. You can move cookies from one plate to another, but you can't put the cookie on the table. That means drag sources (cookies) will always be inside drop zones (plates).
4. Got it, wasn't sure if you wanted to drag a record into a particular spot in the table. If the whole table is a drop zone that's much easier.

egui is storing the payload internally:

• https://docs.rs/egui/latest/egui/struct.Response.html#method.dnd_hover_payload
• https://docs.rs/egui/latest/egui/struct.Response.html#method.dnd_release_payload

As a recap:

1. When you call dnd_drag_source the payload argument will be returned when hovering/releasing that payload/draggable into a drop zone (the table).
2. You can use the two methods above on the drop zone's Response (which is wrapped inside an InnerResponse), this will return the payload you set in (1)

[apoorv569]

Location is similar to the type used in the example. You need to have some type common to your draggables and drop zones or else egui won't see them as compatible (this is a very important point). The idea is that when something gets dropped/hovered on a drop zone, you will receive the value that was associated with the draggable. This is because dnd_drag_source accepts a value of that type as argument (in the api docs this is what the Payload type is).

So Location is the type of data (like int, String etc) that we want to drag and drop? If so Location sounds like it could mean the position where we drop.. Maybe we should just call it Payload instead.

"when they're not moving" == "when they're not being dragged"; If I were to use a metaphor: you have plates and cookies. Plates are drop zones, cookies are drag sources. You can move cookies from one plate to another, but you can't put the cookie on the table. That means drag sources (cookies) will always be inside drop zones (plates).

Hmm.. so should I call ui.dnd_drag_source and ui.dnd_drop_zone here maybe?

impl eframe::App for App {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        if !self.initialized {
            self.preferences_dialog
                .get_mut_audio_preferences()
                .init_backend(&self.serializer, &mut self.app_config);

            if self.theme_config.should_enable_theming(&self.serializer) {
                ctx.set_style(self.set_style(ctx, false));
            }
        }

        self.initialized = true;

        // Process keybinds
        self.process_key_press(ctx);

        // Render custom header bar if enabled
        if !self
            .app_config
            .get_use_system_window_header(&self.serializer)
            && !self.is_window_fullscreen
        {
            egui::TopBottomPanel::top("header_bar")
                .show_separator_line(true)
                .show_animated(ctx, true, |ui| {
                    self.header_bar_widgets(ui);
                });
        }

        // Render about dialog
        self.about_dialog.render(ctx);

        // Render preferences dialog
        self.preferences_dialog.render(ctx);

        // Render file picker dialog
        self.file_picker_dialog.render(ctx);

        // Render side panel
        self.side_panel.render(ctx);    // <-------

        // Render waveform viewer
        self.waveform_viewer.render(ctx);

        egui::CentralPanel::default().show(ctx, |ui| {
            // Render control bar
            self.render_control_bar(ui);

            // Render sample viewer
            self.sample_viewer.render(ui);    // <-------
        });
    }

instead of their respective module (different files) as I'm current doing ATM?

As a recap:

1. When you call dnd_drag_source the payload argument will be returned when hovering/releasing that payload/draggable into a drop zone (the table).
2. You can use the two methods above on the drop zone's Response (which is wrapped inside an InnerResponse), this will return the payload you set in (1)

Do I call response.dnd_hover_payload here?

impl SampleViewer {
    pub fn new() -> Self {
        Self {
            id: egui::Id::new("sample_viewer"),
            number_of_samples: 0,
            // clickable: true,
            scroll_to_row: None,
            selection: Default::default(),
            is_row_selected: false,
        }
    }

    pub fn render(&mut self, ui: &mut egui::Ui, dnd: &mut Dnd) {
        let text_height = egui::TextStyle::Body
            .resolve(ui.style())
            .size
            .max(ui.spacing().interact_size.y);

        // let mut dnd = Dnd::default();

        // let mut source_col_row = None;
        // let mut drop_col = None;

        // let file_tree_id = dnd.get_drag_id().unwrap_or("file_tree_".into());

        // let payload_type = dnd.get_payload_type();
        // let is_payload_valid = dnd.is_payload_valid(payload_type);

        // let mut samples = Vec::default();

        // if is_payload_valid {
        //     log::debug!("Paylad type valid, getting the payload");

        //     samples = dnd.get_payload();
        // }

        // self.number_of_samples = samples.len();

        // let frame = egui::Frame::default();

        // Dnd::drop_target(ui, true, |ui| {
        let (response, payload) = ui
            .dnd_drop_zone::<crate::sample_hive::gui::utils::samples::Sample, ()>(frame, |ui| {
                let mut table = TableBuilder::new(ui)
                    .sense(egui::Sense::click())
                    .striped(true)
                    .cell_layout(egui::Layout::left_to_right(egui::Align::Center))
                    .column(Column::auto())
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::initial(100.0).range(40.0..=300.0).resizable(true))
                    .column(Column::remainder())
                    .min_scrolled_height(0.0);

                if let Some(row_index) = self.scroll_to_row.take() {
                    table = table.scroll_to_row(row_index, Some(egui::Align::Center));
                }

                table
                    .header(20.0, |mut header| {
                        header.col(|ui| {
                            ui.strong("⭐");
                        });
                        header.col(|ui| {
                            ui.strong("Filename");
                        });
                        header.col(|ui| {
                            ui.strong("Sample Pack");
                        });
                        header.col(|ui| {
                            ui.strong("Type");
                        });
                        header.col(|ui| {
                            ui.strong("Channels");
                        });
                        header.col(|ui| {
                            ui.strong("BPM");
                        });
                        header.col(|ui| {
                            ui.strong("Length");
                        });
                        header.col(|ui| {
                            ui.strong("Sample Rate");
                        });
                        header.col(|ui| {
                            ui.strong("Bitrate");
                        });
                        header.col(|ui| {
                            ui.strong("Path");
                        });
                    })
                    .body(|body| {
                        body.rows(text_height, self.number_of_samples, |mut row| {
                            row.set_selected(self.selection.contains(&row.index()));

                            // samples.clone().into_iter().for_each(|sample| {
                            row.col(|ui| {
                                // if sample.get_favorite() {
                                //     ui.selectable_value(&mut self.is_row_selected, true, "⭐");
                                // } else {
                                //     ui.selectable_value(&mut self.is_row_selected, true, "✴");
                                // }
                            });
                            row.col(|ui| {
                                // ui.label(sample.get_filename().unwrap());
                            });
                            row.col(|ui| {
                                // ui.label(sample.get_sample_pack().unwrap());
                            });
                            row.col(|ui| {
                                // ui.label(sample.get_sample_type().unwrap());
                            });
                            row.col(|ui| {
                                // ui.label(sample.get_channels().unwrap().to_string());
                            });
                            row.col(|ui| {
                                // ui.label(sample.get_bpm().unwrap().to_string());
                            });
                            row.col(|ui| {
                                // ui.label(sample.get_length().unwrap());
                            });
                            row.col(|ui| {
                                // ui.label(sample.get_sample_rate().unwrap().to_string());
                            });
                            row.col(|ui| {
                                // ui.label(sample.get_bitrate().unwrap().to_string());
                            });
                            row.col(|ui| {
                                // ui.label(sample.get_path().unwrap());
                            });
                            // });

                            // ui.memory_mut(|mem| {
                            //     mem.set_dragged_id(egui::Id::new((
                            //         "sample_",
                            //         row.col_index(),
                            //         row.index(),
                            //     )))
                            // });

                            self.toggle_row_selection(row.index(), &row.response());

                            // if ui.memory(|mem| mem.is_being_dragged(file_tree_id)) {
                            //     source_col_row = Some((row.index(), row.col_index()));
                            // }
                        })
                    });
                // });
            // });
        // .response;

        // let response = response.context_menu(|ui| {
        //     if ui.button("New Item").clicked() {
        //         self.columns[col_idx].push("New Item".to_owned());
        //         ui.close_menu();
        //     }
        // });

        // let is_being_dragged = ui.memory(|mem| mem.is_anything_being_dragged());

        // if is_being_dragged && is_payload_valid && response.hovered() {
        //     drop_col = Some(samples[0].get_filename());
        // }

        // if let Some((source_col, source_row)) = source_col_row {
        //     if let Some(drop_col) = drop_col {
        //         if ui.input(|i| i.pointer.any_released()) {
        //             // do the drop:
        //             let item = &samples[source_col]; //.remove(source_row);
        //             samples.push(item.clone());
        //         }
        //     }
        // }
        
        if let Some(hovered_payload) = response
            .response
            .dnd_hover_payload::<crate::sample_hive::gui::utils::samples::Sample>(
        ) {
            // draw a yellow rect around drop zone when a source is hovering over it
            let highlight_rect = response.response.rect.expand(4.0);
            ui.painter().rect(
                highlight_rect,
                0.0,
                egui::Color32::TRANSPARENT,
                egui::Stroke::new(2.0, egui::Color32::from_hex("#fc0").unwrap()),
            );

            // debug print so you can see what's going on
            // `loc` is a `Location` representing the location of the item being hovered over
            println!("{:?} hovers over {:?}", hovered_payload, frame.clone());    // Not sure what would `loc.clone()` here in my case.
        }
    }

This dnd_hover_payload call does nothing ATM. I don't see anything being printed or visually change on the screen.

Actually when wrapped by dnd_drop_zone the Table widget doesn't even render properly,

This is what it looks like when wrapped with dnd_drop_zone,

And this is what it looks like when its not wrapped with dnd_drop_zone,

[j-n-f]

So Location is the type of data (like int, String etc) that we want to drag and drop? If so Location sounds like it could mean the position where we drop.. Maybe we should just call it Payload instead.

That's what it's called in API documentation. I was using Location as a reference to the example code.

I think you're making this way harder than it has to be:

1. You create drag sources (you haven't shown this in your most recent code), this will wrap the element you want to be drag-able
2. You create drop zones that are associated with some Payload type (this is shown)

As far as the table is concerned, that seems like a separate issue. I would recommend reading the source code for dnd_drop_zone as it does a few unexpected things to the frame passed in. You may need to tell the TableBuilder to have some minimum height or something. I don't know, I haven't used it.

This dnd_hover_payload call does nothing ATM. I don't see anything being printed or visually change on the screen.

Why would you expect it to do anything if there are no calls to dnd_drag_source? If there are calls to dnd_drag_source, why wouldn't you show that? The way you asked "Hmm.. so should I call ui.dnd_drag_source and ui.dnd_drop_zone here maybe?" implies you haven't added those calls. Posting calls to utility code with // <--------- comments (that are meaningless and unlabelled) doesn't provide any insight.

No one can help you unless you show your work.

Did you try hovering over the table header? The missing vertical lines from your table should be a dead giveaway that the table has been resized. Try adding some fake, static records to the table for troubleshooting.

[apoorv569]

1. You create drag sources (you haven't shown this in your most recent code), this will wrap the element you want to be drag-able

I have shared my drag-source twice, in the original post and in the post before your first reply to me. But here it is again,

impl BrowserSection {
    fn new() -> Self {
        Self {
            path: PathBuf::from("/"),
            samples: Vec::new(),
        }
    }

    fn render(&mut self, ui: &mut egui::Ui, dnd: &mut Dnd) {
        self.directory_browser(ui, &self.path.clone(), dnd);
    }

    fn directory_browser(&mut self, ui: &mut egui::Ui, path: &std::path::Path, dnd: &mut Dnd) {
        if let Ok(entries) = std::fs::read_dir(path) {
            entries.filter_map(|entry| entry.ok()).for_each(|entry| {
                let mut samples_clone = self.samples.clone();

                let path = entry.path();

                let file_tree_id = egui::Id::new("file_tree_")
                    .with(entry.file_name().to_string_lossy())
                    .with(entry.path().to_string_lossy());

                // let mut dnd = Dnd::default();

                // let source_col: Option<(usize, usize)> = None;
                // let drop_col: Option<usize> = None;

                // let mut samples: Vec<Sample> = Vec::new();
                // let mut samples_clone = samples.clone();

                // let file_tree_id = ui.memory(|mem| mem.dragged_id().unwrap());

                // Dnd::drag_source(ui, file_tree_id, |ui| {
                ui.dnd_drag_source(file_tree_id, samples_clone.clone(), |ui| {
                    if path.is_dir() {
                        egui::collapsing_header::CollapsingState::load_with_default_open(
                            ui.ctx(),
                            file_tree_id,
                            false,
                        )
                        .show_header(ui, |ui| {
                            let directory = ui.selectable_label(
                                false,
                                format!("📁 {}", entry.file_name().to_string_lossy()),
                            );

                            // samples_clone.push(Sample::new(
                            //     false,
                            //     format!("{}", entry.file_name().to_string_lossy()),
                            //     format!("{}", entry.file_name().to_string_lossy()),
                            //     format!("{}", entry.file_name().to_string_lossy()),
                            //     2,
                            //     132,
                            //     "00:32".to_string(),
                            //     44100,
                            //     51243,
                            //     format!("{}", entry.path().to_string_lossy()),
                            // ));

                            // if directory.hovered() {
                            //     ui.ctx().set_cursor_icon(egui::CursorIcon::Grab);
                            // }

                            // let dir_sense = directory.interact(egui::Sense::click_and_drag());

                            // if dir_sense.dragged() {
                            //     log::debug!("Directory is being dragged..");

                            //     ui.ctx().set_cursor_icon(egui::CursorIcon::Grabbing);
                            // }

                            // if dir_sense.drag_started() {
                            //     dnd.set_drag_id(file_tree_id);
                            //     dnd.set_payload_type(Payload::SampleDir);
                            //     dnd.set_payload(samples);
                            // }
                        })
                        .body(|ui| {
                            // let header = egui::CollapsingHeader::new(format!(
                            //     "📁 {}",
                            //     entry.file_name().to_string_lossy()
                            // ))
                            // .default_open(false)
                            // .show(ui, |ui| {});

                            self.directory_browser(ui, &path, dnd);
                        });
                    } else {
                        let file = ui.selectable_label(
                            false,
                            format!("📄 {}", &entry.file_name().to_string_lossy()),
                        );

                        // samples_clone.push(Sample::new(
                        //     false,
                        //     format!("{}", entry.file_name().to_string_lossy()),
                        //     format!("{}", entry.file_name().to_string_lossy()),
                        //     format!("{}", entry.file_name().to_string_lossy()),
                        //     2,
                        //     132,
                        //     "00:32".to_string(),
                        //     44100,
                        //     51243,
                        //     format!("{}", entry.path().to_string_lossy()),
                        // ));

                        // if file.hovered() {
                        //     ui.ctx().set_cursor_icon(egui::CursorIcon::Grab);
                        // }

                        // let file_sense = file.interact(egui::Sense::click_and_drag());

                        // if file_sense.dragged() {
                        //     log::debug!("File is being dragged..");

                        //     ui.ctx().set_cursor_icon(egui::CursorIcon::Grabbing);
                        // }

                        // if file_sense.drag_started() {
                        //     dnd.set_drag_id(file_tree_id);
                        //     dnd.set_payload_type(Payload::SampleFile);
                        //     dnd.set_payload(samples);
                        // }
                    }
                });

                // if let Some((source_col, source_row)) = source_col {
                //     if let Some(drop_col) = drop_col {
                //         if ui.input(|i| i.pointer.any_released()) {
                //             // do the drop:
                //             let item = samples_clone[source_col].remove(source_row);
                //             samples_clone[drop_col].push(item);
                //         }
                //     }
                // }
            });
        }
    }
}

I left all the commented code I have as well from when I was creating my own dnd logic as shared in the original post. I even edited my previous comment for drop_zone and added the commented code that I have when I was using my Dnd class. (which somewhat worked actually).

As far as the table is concerned, that seems like a separate issue. I would recommend reading the source code for dnd_drop_zone as it does a few unexpected things to the frame passed in. You may need to tell the TableBuilder to have some minimum height or something. I don't know, I haven't used it.

There is no option for min height or something in TableBuilder.

Why would you expect it to do anything if there are no calls to dnd_drag_source? If there are calls to dnd_drag_source, why wouldn't you show that? The way you asked "Hmm.. so should I call ui.dnd_drag_source and ui.dnd_drop_zone here maybe?" implies you haven't added those calls. Posting calls to utility code with // <--------- comments (that are meaningless and unlabelled) doesn't provide any insight.

This code where I asked if I should call dnd_drag_source and dnd_drop_zone here, is in another module where I render all components. where I impl the eframe::App trait for my app..