Delag & Drop-vigetes եւ ճնշումներ

1) Հասկացություն և սցենարներ

Delag & Drop-վիջետները ինտերակտիվ բլոկներ են (գծապատկերների քարտեր, աղյուսակներ, ֆիլտրեր, կոճակներ), որոնք օգտագործողը ազատ տեղադրում է բլրի վրա, որը կապված է ցանցին։ Պրեսետները պահպանված դասավորություններ և ոճեր են (layout + թեման + պարամետրեր), որոնք կարող են արագ օգտագործել, կիսվել և տարբերակել։

Տիպիկ սցենարներ

Դաշբորդի հավաքումը պատրաստի բլոկներից (KPI քարտեր, գրաֆիկներ, ֆիլտրեր)։

Արագ փոփոխությունը «Կոմպակտ», «Վերլուծություն», «Ներկայացում» ճնշումների միջոցով։

Համատեղ խմբագրում. Վաճառքը տեղադրում է վիջետետներ, վերլուծաբանը տեղադրում է աղբյուրները։

«Միայն կարդալ» հրատարակությունը սթեյքհոլդների համար։

2) Ճարտարապետական սկզբունքները

1. Grid-first: դիրքը տրամաբանական սյունակներում/տողերում (12/24), պիքսելները ածանցյալներ են։

2. Diapping & Guides: Մագնիսական ուղղություններ, ցանցին և հարևաններին, հավասարեցում։

3. Constraint-a.ru: Չափսերի/համամասնությունների սահմանափակիչներ, min/max, k- asp.ru։

4. Safe-by-international-ը շարունակական ավտոսրահն է, գործարքային հրապարակումը, undo/redo։

5. A1y-first: DnD ստեղնաշարից և փոփոխությունների բարձրաձայնումը։

6. Realtime-ready: CRDT/OT-ի համար։

7. Themable 'դիզայն-հոսանքներ, ճնշում են նրանց, ռեժիմները թեթև/մութ/հակադրիչ են։

8. Portable: Express/www.JSON/YAML; սխեմաների տարբերակումը։

3) Տվյալների մոդելը (պարզեցված)

json
{
"id": "layout_01",
"name": "Analytics - Compact,"
"version": "2. 1. 0",
"grid": { "cols": 12, "rowHeight": 8, "gutter": 8, "margin": 16 },
"theme": { "preset": "light-pro", "tokens": { "radius": 12, "elevation": "soft" } },
"widgets": [
{
"id": "w_kpi_1",
"type": "kpi",
"title": "GGR",
"pos": { "x": 0, "y": 0, "w": 3, "h": 4, "z": 1 },
"constraints": { "minW": 2, "minH": 3, "lockAspect": false },
"props": { "format": "currency", "source": "ggr_daily" }
},
{
"id": "w_chart_1",
"type": "lineChart",
"title": "Deposits Trend",
"pos": { "x": 3, "y": 0, "w": 6, "h": 8, "z": 1 },
"props": { "source": "deposits", "legend": true }
},
{
"id": "w_table_1",
"type": "table",
"title": "Top Segments",
"pos": { "x": 9, "y": 0, "w": 3, "h": 12, "z": 2 },
"props": { "source": "segments_top", "pageSize": 12 }
}
],
"meta": { "createdBy": "dima", "updatedAt": "2025-11-03T17:55:00Z" }
}

4) Գրիդ, հյուրանոցներ և ուղեցույցներ

Ցանցը '12 զանգված, 6 - պլանշետի համար, 4 - հեռախոսների համար; > նույնն է կայուն ուղղահայաց ծածկույթի համար։

Systapping: Կապիկ ծայրերում/կենտրոններում; «Մագնիսական» 4/8 px; խելացի կերակուրներ, երբ մոտենում են հարևաններին։

System-flow: Ավտոմատ փոխանցումը ավելի ցածր է, երբ փոխկապակցվում է։ «նվազող բլոկների» ալգորիթմը։

Հարգանքը 'breakpoin.ru-ը յուրաքանչյուր breakpoint-ի տակ այլընտրանքային «pos» է։

5) DnD իրադարձությունները և վիճակը

События: `dragStart`, `drag`, `dragOver`, `drop`, `resizeStart`, `resize`, `resizeEnd`, `select`, `group`, `ungroup`, `reorder`, `undo`, `redo`.

Վիճակը

Ghost/Winview: կիսաթափանցիկ ֆորումը գլանման ժամանակ։

Placeholders: թույլատրելի գոտիներ (կանաչ լուսավորություն), արգելված (կարմիր)։

Collision map: արագ հաշվարկը զբաղված դեղամիջոցների (bitset/interval tree)։

6) Resaiz, հավասարեցում, z-index, z-index

Ռեսայզայի ձեռքերը անկյուններում + պահել «Shift» 'համամասնությունները պահպանելու համար։

Խմբի հավասարեցումը '«ձախ/աջ եզրին», «կենտրոնում», «բաժանել հավասարաչափ»։

Ներդրման մակարդակները '«z», որը սահմանափակվում է միջակայքով, կոճակները «առջևի/հետևի»։

7) Խմբեր, բեռնարկղեր և ներդրումներ

Խմբերը 'բազմազան բաշխում, միասին տեղադրում, խմբակային հավասարեցում։

Տեսողական բեռնարկղերը 'տաբերը, ակորդեոնները, կարուսելները, կարող են ընդունել աղջիկներին։

Բեռնման սահմանափակիչները ՝ արտաքին ցանցը ներքին (այլ սյուներ)։

8) Պրեսետներ (ձևանմուշներ) և տարբերակներ

Պրեսետների տեսակները ՝ layout, թեման (theme), «վիջեթների հավաքածու», «layout + տվյալները»։

Տարբերակումը '«semver» սխեմաներ և շարժիչներ (map դաշտեր, դեֆոլտներ)։

Diview & Appy: Նախնական դիտումը մինչև կիրառումը։

Scoped presets 'անձնական, թիմային, գլոբալ; ընթերցանության/խմբագրման իրավունք։

Էքսպորտը/108: JSON/YAML, վերահսկողական սումմի ստորագրությունը, ռուսական տարբերակի ստուգումը։

9) Հասանելիություն (A1y) և ստեղնաշար

Ամբողջական keyboard DnD։

«Enter/Space» - սկսել տեղափոխումը; սլաքները ցանցային քայլ են, «Shift» + սլաքները արագացված քայլ են, «Esc» - վերացումը։

«Ctrl/Cmd + G» - խմբավորել, «Ctrl/Cmd + Shift + G» - ի խմբավորումը։

"Alt '- ժամանակավորապես անջատել ցանցին։

SR '"Շարժվել է (x, y)։ Կպչուն 'ներառական։ Հակամարտություն' այո/ոչ"։

Ֆոկուս օղակները, մեծ resize, drop գոտիները, որոնք նկարագրում են։

10) Թաչը և բջջային փամփուշտները

Long-press (300-500 Ms) DnD-ի մեկնարկի համար։

Ավելացված targets (առնվազն 40-48 px)։

Գործիքների հարմարվողական վահանակները (ներքևի դոպկ վահանակ)։

«Խմբագրման ռեժիմը» 'արգելափակել կտավը, ուղղահայաց մեքենա-սկրոլը եզրին տեղափոխվելիս։

11) Վիջեթների գործողությունները (Actionable Widgets)

Ներկառուցված CTA (կոճակը), կոնտեքստային ընտրացանկը, www.ag-clone (կրկնօրինակումը 'Alt')։

Արագ ճնշումները (խտություն, լեգենդ, գունավոր սխեմա)։

Վիճակը ՝ loading/empty/error, անվտանգ փակումներ («տվյալները հետ են մնում»)։

12) Համատեղ աշխատանք և հրատարակություն

Realtime: CRDT (օրինակ, Yjs) կամ OT (Quill-մոտեցում) - մասնակիցների կուրսորները, խմբերի արգելափակումը։

Իրավունքները ՝ «Owner», «Editor», «Viewer»; նկարի հրապարակումը (imutable www.apshot)։

Հոսքերը ՝ չեռնովիկը հակված է հրապարակման։ փոփոխությունների համեմատություն (diff layout's)։

13) Undo/Redo և ավտոսրահը

Թիմային անվադողեր 'յուրաքանչյուր վիրահատություն' թիմը '«do/undo» -ի հետ։

Տեսահոլովակի վրա ամսագիրը (in-memory + պարբերական persist), կոորդինատների սահմանը։

Express-save: Յուրաքանչյուր N վայրկյան/« idle »,« Պահպանված »բաղադրիչի հետ։

14) Տեմիզացիա և դիզայն-հոսանքներ

json
{
"themeId": "light-pro",
"tokens": {
"fontScale": { "h1": 24, "h2": 18, "body": 14 },
"radius": 12,
"elevation": "soft",
"palette": { "primary": "#3366FF", "critical": "#E53935" }
}
}

Փոխակերպումը առանց layout (միայն տեսողական հոսանքներ)։

Հակադրություն AA/AAA, High-Windrance ռեժիմը, մութ թեման ճիշտ մոխրագույն հետ։

15) Արտադրողականությունը

Շերտերի նկարագրությունը (canvas/webgl բարդ գրաֆիկների համար, DFC քրոմի համար)։

Ցուցակների/աղյուսակների վիրտուալացում, throttle 'ww.ag "(16 նոյեմբերի), requestAniment Frame։

Մարթա Ռենդեր 'նկարել միայն փոփոխված վիջետետները։

Քեշը հաշվում է կոլեկտիվներին և դլիններին։

16) Բովանդակության անվտանգությունն ու պաշտպանությունը

Sanbox-ի համար (iframe, CSP, «sandbox»)։

Դրոպների սահմանափակումը 'տեսակների whitelist (ֆայլեր, հղումներ, JSON ճնշումներ); չափի և պարունակության ստուգում։

Ճնշումների իրավունքները (RBAC/ABAC), էքսպորտի աուդիտ/ռուսական։

17) API vijets (պայմանագիր)

ts interface Widget {
id: string;
type: string;
pos: { x:number; y:number; w:number; h:number; z:number };
constraints?: { minW?:number; minH?:number; maxW?:number; maxH?:number; lockAspect?:boolean };
props: Record<string, unknown>;
validate? (props): { ok: boolean; errors?: string[] };
onDrop? (dataTransfer): DropResult ;//support for external drop onAction? (actionId: string, payload?: any): void;
}

Կյանքի ցիկլի իրադարձությունները '«mount», «resize», «visibilium Change»։

Նախքան հրատարակումը, բացակայում էր։

18) Մոսկվա/էքսպորտը և ռուսական

Էքսպորտը ՝ «grid», «widgets», «theme», «meta»։

Տե՛ ս սխեմայի տարբերակների ստուգումը, ավտոմատ պարամետրերը (map դաշտեր/դեֆոլտներ), զեկույցը։

Nok-ռուսական ճնշումը հեշի հետ, որպեսզի ապահովեն ամբողջականությունը։

19) Տաք դեղամիջոցներ (առաջարկվող)

Ռոտացիան '"07/07/2019" - շարժում; "Shift '+ սլաքները արագ քայլ են։

Resize: 'Alt' + սլաքները։

Վիրահատություններ ՝ «Ctrl/Cmd + D» - դուբլիկատ; «Ctrl/Cmd + G» - խումբ; «Ctrl/Cmd + Shift + G» -

Մակարդակները ՝ «[/']» - առաջ/առաջ z-index։

Undo/Redo: `Ctrl/Cmd+Z` / `Ctrl/Cmd+Shift+Z` (или `Y`).

Պրեսետներ ՝ «Ctrl/Cmd + 1.. 9» - արագ օգտագործել պահպանված։

20) UX-patterns

Արագ դելդները առաջին գործարկման ժամանակ (միկրո-onbording 3-5 քայլով)։

Ցանցի ռեժիմը 'անջատիչ «ցույց տալ/թաքցնել ցանցը»։

Inline-հուշումները կոլիզիայի վրա («անհասանելի է. White = 3»)։

Մակետների պատմությունը 'նախորդ տարբերակին։

21) Թեստ պլան

Յունիթ 'կոնստրուկցիաների հաշվարկը, դիպուկահարը, constrainment-ը։

Ինտեգրումը 'DnD մկնիկ/tach/ստեղնաշար; խմբեր; բեռնարկղեր։

E2E 'dashbord հավաքումը «զրոյից», պրեսետի օգտագործումը, հրապարակումը, էքսպորտը/։

Հաոս 'ռենդերի ուշացում, կապի կորուստ (realtime), իրավունքների հակամարտություն։

A1y: ստեղնաշարային սցենարներ, SR ձայն, հակադրություն։

22) Ներդրման թուղթ

• Ցանցը/բրեյքպոինտները և դիպուկահարները տրամադրված են
• Resaiz/խումբ/հավասարումը աշխատում և փորձարկվում են
• Ստեղնաշարի DnD և էկրանի նշանները ներառված են
• Avtoseiv, undo/redo, maketev պատմություն
• Պրեսետներ ՝ վարկածներ, իրավունքներ, էքսպորտ/2019
• Թեմաներ և դիզայնի-հոսանքներ, High-Mastrance ռեժիմը
• Realtime-համագործակցություն և հակամարտությունների լուծումը
• Drops սահմանափակումը, ֆայլերի վալիդացիան, sandbox HTML-ը
• Metriki: adoption, ժամանակը մինչև առաջին տեղաբաշխումը, անիվների սխալները։

23) Mini-FAQ

Ինչու՞ միայն ցանցը, ոչ թե ազատ կոորդինատները։

Ցանցը պարզեցնում է հավասարումը, հարմարեցումը, ճնշումների հանդուրժողականությունը և արտադրողականությունը։

Ինչպե՞ ս պահել տարբեր layout's brackpoints-ի տակ։

Յուրաքանչյուր վիջետ ունի «pos» բրեյքպոինտ (desktop/tablet/mobile) ավտոմատ fall-back։

Ի՞ նչ ընտրել համագործակցության համար 'OT կամ CRDT։

CRDT-ն ավելի հեշտ է ռուսական/հակամարտությունների համար։ OT-ը գծային տեքստային վիրահատությունների համար է։ Layout-ի համար ավելի հաճախ վերցնում են CRDT-ը։

Արդյունքը

Լավ Drag & Drop-vigets-ը ոչ միայն «կրակել քարտը»։ Սա խիստ ցանցն է, սարքավորումները, հարմարավետ խմբերը և հավասարեցումը, ստեղնաշարի հասանելիությունը, կայուն ճնշումները տարբերակների և թողարկումների, անվտանգ հրապարակումների և համատեղ աշխատանքի հետ։ Կառուցեք սա UX-ի և թեստային պլանի տվյալների հուսալի մոդելի շուրջ, և դիզայները կդառնա արագ, հասկանալի և կայուն բովանդակության և հրամանների աճի համար։