Seperate dnd_drag_source closure content from dragable area

[Stelios-Kourlis]

I'm trying to make a trello-like ToDo board and I have multiple lists of tasks. Each task has a ui method to draw it self which is

pub fn ui(&mut self, ui: &mut Ui) -> egui::InnerResponse<bool> {
        Frame::group(ui.style())
            .inner_margin(Margin::same(5))
            .fill(hex_color!("#1d1f21"))
            .stroke(Stroke::NONE)
            .corner_radius(CornerRadius::same(8))
            .show(ui, |ui| {
                ui.set_width(300.0);
                ui.vertical(|ui| {
                    ui.dnd_drag_source(Id::new(self.id), self.id, |ui| {
                        ui.with_layout(
                            egui::Layout::left_to_right(egui::Align::Min).with_main_justify(true),
                            |ui| {
                                ui.add_sized(
                                    [24.0, 24.0],
                                    egui::Image::new(egui::include_image!(
                                        "../assets/drag_indicator.png"
                                    )),
                                );
                            },
                        );
                    });
                    let title_id = ui.id().with(format!("title_{}", self.id));
                    let title_has_focus = ui.memory(|m| m.has_focus(title_id));
                    ui.add(
                        egui::TextEdit::multiline(&mut self.title)
                            .desired_rows(1)
                            .desired_width(ui.available_width())
                            .id(title_id)
                            .frame(title_has_focus),
                    );
                    let description_id = ui.id().with(format!("description_{}", self.id));
                    let description_has_focus = ui.memory(|m| m.has_focus(description_id));
                    ui.add(
                        egui::TextEdit::multiline(&mut self.description)
                            .desired_rows(3)
                            .desired_width(ui.available_width())
                            .id(description_id)
                            .frame(description_has_focus),
                    );

                    ui.horizontal(|ui| {
                        ui.checkbox(&mut self.completed, "Completed");

                        // right-aligned widgets
                        ui.with_layout(egui::Layout::right_to_left(egui::Align::Min), |ui| {
                            ui.add_sized(
                                [30.0, 30.0],
                                egui::ImageButton::new(egui::include_image!(
                                    "../assets/delete.png"
                                ))
                                .corner_radius(10),
                            )
                            .clicked()
                        })
                        .inner
                    })
                    .inner
                })
            })
            .inner
    }

which achieves this

What I want to now do is have the dnd source be only the image of the 6 dots, which is what this code does but when I drag it the preview painted on the cursor is only the image. Encapsulating the whole frame in a dnd_drag_source has the correct preview of the entire task being dragged but then the dnd doesnt allow me to click the checkboxes and buttons. Is there a way where dnd_drag_source only activates when dragging the image but the preview drawn at the cursor be the whole task?

Thanks in advance

[Stelios-Kourlis]

After experimenting I came up with this solution

fn paint_body(&mut self, ui: &mut Ui) -> InnerResponse<bool> {
        let title_id = ui.id().with(format!("title_{}", self.id.value()));
        let title_has_focus = ui.memory(|m| m.has_focus(title_id));
        ui.add(
            egui::TextEdit::multiline(&mut self.title)
                .desired_rows(1)
                .desired_width(ui.available_width())
                .id(title_id)
                .frame(title_has_focus),
        );
        let description_id = ui.id().with(format!("description_{}", self.id.value()));
        let description_has_focus = ui.memory(|m| m.has_focus(description_id));
        ui.add(
            egui::TextEdit::multiline(&mut self.description)
                .desired_rows(3)
                .desired_width(ui.available_width())
                .id(description_id)
                .frame(description_has_focus),
        );

        ui.horizontal(|ui| {
            ui.checkbox(&mut self.completed, "Completed");

            // right-aligned widgets
            ui.with_layout(egui::Layout::right_to_left(egui::Align::Min), |ui| {
                ui.add_sized(
                    [30.0, 30.0],
                    egui::ImageButton::new(egui::include_image!("../assets/delete.png"))
                        .corner_radius(10),
                )
                .clicked()
            })
            .inner
        })
    }

    pub fn ui(&mut self, ui: &mut Ui) -> InnerResponse<bool> {
        ui.set_width(300.0);
        ui.vertical(|ui| {
            let mut response = Option::<InnerResponse<bool>>::None;
            let is_being_dragged = ui.ctx().is_being_dragged(self.id);
            ui.spacing_mut().item_spacing = egui::vec2(0.0, 0.0);
            ui.dnd_drag_source(self.id, self.id, |ui| {
                let (bottom_radius, bottom_margin) = if is_being_dragged { (8, 5) } else { (0, 0) };
                let cr = CornerRadius {
                    nw: 8,
                    ne: 8,
                    sw: bottom_radius,
                    se: bottom_radius,
                };
                let margin = Margin {
                    top: 5,
                    left: 5,
                    right: 5,
                    bottom: bottom_margin,
                };
                Frame::group(ui.style())
                    .inner_margin(margin)
                    .fill(hex_color!("#1d1f21"))
                    .stroke(Stroke::NONE)
                    .corner_radius(cr)
                    .show(ui, |ui| {
                        ui.with_layout(
                            egui::Layout::left_to_right(egui::Align::Min).with_main_justify(true),
                            |ui| {
                                ui.add_sized(
                                    [24.0, 24.0],
                                    egui::Image::new(egui::include_image!(
                                        "../assets/drag_indicator.png"
                                    )),
                                );
                            },
                        );
                        if is_being_dragged {
                            response = Some(self.paint_body(ui));
                        }
                    });
            });
            if response.is_none() {
                let cr = CornerRadius {
                    sw: 8,
                    se: 8,
                    ..Default::default()
                };
                let margin = Margin {
                    left: 5,
                    right: 5,
                    bottom: 5,
                    ..Default::default()
                };
                Frame::group(ui.style())
                    .inner_margin(margin)
                    .fill(hex_color!("#1d1f21"))
                    .stroke(Stroke::NONE)
                    .corner_radius(cr)
                    .show(ui, |ui| self.paint_body(ui))
                    .inner
            } else {
                response.unwrap()
            }
        })
        .inner
    }

The code is a bit eye jarring but it works as described. This is the behaviour is code achieves. Basically if its being dragged draw the body inside the closure, else outside it. Then do some Frame stuff to make it always look the same