Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix container and kanban can't be moved by dragging on the body of the component (#11355)

Browse source
This commit is contained in:
Nakul Nagargade 2024-12-04 13:54:43 +05:30 committed by GitHub
parent a609b3cd7a
commit 966c208333
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
View file

@ -592,7 +592,12 @@ export default function Grid({ gridWidth, currentLayout }) {
onDragStart={(e) => {
e?.moveable?.controlBox?.removeAttribute('data-off-screen');
const box = boxList.find((box) => box.id === e.target.id);
let isDragOnTableORCalendar = false;
// This flag indicates whether the drag event originated on a child element within a component
// (e.g., inside a Table's columns, Calendar's dates, or Kanban's cards).
// When true, it prevents the parent component from being dragged, allowing the inner elements
// to handle their own interactions like column resizing or card dragging
let isDragOnInnerElement = false;
/* If the drag or click is on a calender popup draggable interactions are not executed so that popups and other components inside calender popup works.
Also user dont need to drag an calender from using popup */
@ -603,20 +608,24 @@ export default function Grid({ gridWidth, currentLayout }) {
/* Checking if the dragged elemenent is a table. If its a table drag is disabled since it will affect column resizing and reordering */
if (box?.component?.component === 'Table') {
const tableElem = e.target.querySelector('.jet-data-table');
isDragOnTableORCalendar = tableElem.contains(e.inputEvent.target);
isDragOnInnerElement = tableElem.contains(e.inputEvent.target);
}
if (box?.component?.component === 'Calendar') {
const calenderElem =
e.target.querySelector('.rbc-month-view') ||
e.target.querySelector('.rbc-time-view') ||
e.target.querySelector('.rbc-day-view');
isDragOnTableORCalendar = calenderElem.contains(e.inputEvent.target);
isDragOnInnerElement = calenderElem.contains(e.inputEvent.target);
}
if (
['RangeSlider', 'Container', 'BoundedBox', 'Kanban'].includes(box?.component?.component) ||
isDragOnTableORCalendar
) {
if (box?.component?.component === 'Kanban') {
const handleContainers = e.target.querySelectorAll('.handle-container');
isDragOnInnerElement = Array.from(handleContainers).some((container) =>
container.contains(e.inputEvent.target)
);
}
if (['RangeSlider', 'BoundedBox'].includes(box?.component?.component) || isDragOnInnerElement) {
const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
const isHandle = targetElems.find((ele) => ele.classList.contains('handle-content'));
if (!isHandle) {

2
server/src/helpers/utils.helper.ts
View file

@ -433,4 +433,4 @@ export const getSubpath = () => {
}
}
return subpath;
};
};