Angular CDK Drag & Drop: حرکت چند جهته

Summarize this content to 400 words in Persian Lang

این مقاله حاوی دموهای تعاملی است، برای دیدن آنها در عمل به آن در https://angular-material.dev/articles/angular-cdk-drag-drop-mixed مراجعه کنید

Angular CDK Drag & Drop

این @angular/cdk/drag-drop ماژول به شما این امکان را می دهد که بدون دردسر و به طور آشکار رابط های کشیدن و رها کردن بسازید. از کشیدن رایگان، مرتب‌سازی فهرست، انتقال آیتم‌ها بین فهرست‌ها، انیمیشن‌ها، دستگاه‌های لمسی، دستگیره‌های کشیدن سفارشی، پیش‌نمایش‌ها، مکان‌ها، لیست‌های افقی و قفل کردن محور پشتیبانی می‌کند.

ترتیب مجدد لیست ها

بسته بندی مجموعه ای از cdkDrag عناصر با cdkDropList آنها را در یک مجموعه قابل سفارش مجدد گروه بندی می کند. همانطور که عناصر حرکت می کنند، آنها به طور خودکار مرتب می شوند. با این حال، این مدل داده شما را به روز نمی کند. می توانید به آن گوش دهید cdkDropListDropped رویداد برای به روز رسانی مدل داده پس از پایان کشیدن کاربر.

cdkDropList class=”example-list” (cdkDropListDropped)=”drop($event)”>
@for (movie of movies; track movie) {
class=”example-box” cdkDrag>{{movie}}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

import { Component } from “@angular/core”;
import {
CdkDrag,
CdkDragDrop,
CdkDropList,
moveItemInArray,
} from “@angular/cdk/drag-drop”;

@Component({
selector: “app-basic-drag-drop”,
templateUrl: “basic.component.html”,
styleUrl: “basic.component.css”,
standalone: true,
imports: [CdkDropList, CdkDrag],
})
export class BasicDragDropExampleComponent {
movies = [
“Episode I – The Phantom Menace”,
“Episode II – Attack of the Clones”,
“Episode III – Revenge of the Sith”,
“Episode IV – A New Hope”,
“Episode V – The Empire Strikes Back”,
“Episode VI – Return of the Jedi”,
“Episode VII – The Force Awakens”,
“Episode VIII – The Last Jedi”,
“Episode IX – The Rise of Skywalker”,
];

drop(event: CdkDragDropstring[]>) {
moveItemInArray(
this.movies,
event.previousIndex,
event.currentIndex
);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

.example-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: white;
border-radius: 4px;
overflow: hidden;
}

.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
}

.cdk-drag-preview {
border: none;
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
opacity: 0;
}

.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:last-child {
border: none;
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جهت گیری ها

Angular CDK از 2 جهت برای مرتب سازی مجدد لیست ها پشتیبانی می کند: عمودی (پیش فرض) و افقی.

این cdkDropList دستورالعمل فرض می کند که لیست ها به طور پیش فرض عمودی هستند. این را می توان با تنظیم تغییر داد cdkDropListOrientation دارایی به horizontal.

cdkDropList cdkDropListOrientation=”horizontal” class=”example-list” (cdkDropListDropped)=”drop($event)”>
@for (timePeriod of timePeriods; track timePeriod) {
class=”example-box” cdkDrag>{{timePeriod}}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

import {Component} from ‘@angular/core’;
import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from ‘@angular/cdk/drag-drop’;

@Component({
selector: ‘app-horizontal-drag-drop’,
templateUrl: ‘horizontal.component.html’,
styleUrl: ‘horizontal.component.css’,
standalone: true,
imports: [CdkDropList, CdkDrag],
})
export class HorizontalDragDropExampleComponent {
timePeriods = [
‘Bronze age’,
‘Iron age’,
‘Middle ages’,
‘Early modern period’,
‘Long nineteenth century’,
];

drop(event: CdkDragDropstring[]>) {
moveItemInArray(this.timePeriods, event.previousIndex, event.currentIndex);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

.example-list {
width: 54vw;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: flex;
flex-direction: row;
background: white;
border-radius: 4px;
overflow: hidden;
}

.example-box {
padding: 20px 10px;
border-right: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
flex-grow: 1;
flex-basis: 0;
}

.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
opacity: 0;
}

.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:last-child {
border: none;
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جهت گیری مختلط

به طور پیش فرض، cdkDropList موارد را با جابجایی آنها با تبدیل CSS مرتب می کند. این کار مرتب‌سازی متحرک را برای تجربه کاربری بهتر امکان‌پذیر می‌کند، اما فقط در یک جهت کار می‌کند: عمودی یا افقی.

از مواد زاویه ای v18.1.0، برای لیست های قابل مرتب سازی که نیاز به بسته بندی دارند، می توانید تنظیم کنید cdkDropListOrientation=”mixed”. این از یک استراتژی مرتب‌سازی متفاوت با جابجایی عناصر در DOM استفاده می‌کند و به آیتم‌ها اجازه می‌دهد تا به خط بعدی بسته شوند. با این حال، نمی تواند عمل مرتب سازی را متحرک کند.

cdkDropList cdkDropListOrientation=”mixed” class=”example-list” (cdkDropListDropped)=”drop($event)”>
@for (item of items; track item) {
class=”example-box” cdkDrag>{{item}}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

import {Component} from ‘@angular/core’;
import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from ‘@angular/cdk/drag-drop’;

/**
* @title Drag&Drop horizontal wrapping list
*/
@Component({
selector: ‘app-mixed-drag-drop’,
templateUrl: ‘mixed.component.html’,
styleUrl: ‘mixed.component.css’,
standalone: true,
imports: [CdkDropList, CdkDrag],
})
export class MixedDragDropExampleComponent {
items = [‘Zero’, ‘One’, ‘Two’, ‘Three’, ‘Four’, ‘Five’, ‘Six’, ‘Seven’, ‘Eight’, ‘Nine’];

drop(event: CdkDragDropstring[]>) {
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

.example-list {
display: flex;
flex-wrap: wrap;
width: 505px;
max-width: 100%;
gap: 15px;
padding: 15px;
border: solid 1px #ccc;
min-height: 60px;
border-radius: 4px;
overflow: hidden;
}

.example-box {
padding: 20px 10px;
border: solid 1px #ccc;
border-radius: 4px;
color: rgba(0, 0, 0, 0.87);
display: inline-block;
box-sizing: border-box;
cursor: move;
background: white;
text-align: center;
font-size: 14px;
min-width: 115px;
}

.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
opacity: 0;
}

.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

 cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
    @for (movie of movies; track movie) {
      
 class="example-box" cdkDrag>{{movie}}
    }

import { Component } from "@angular/core";
import {
    CdkDrag,
    CdkDragDrop,
    CdkDropList,
    moveItemInArray,
} from "@angular/cdk/drag-drop";

@Component({
    selector: "app-basic-drag-drop",
    templateUrl: "basic.component.html",
    styleUrl: "basic.component.css",
    standalone: true,
    imports: [CdkDropList, CdkDrag],
})
export class BasicDragDropExampleComponent {
    movies = [
        "Episode I - The Phantom Menace",
        "Episode II - Attack of the Clones",
        "Episode III - Revenge of the Sith",
        "Episode IV - A New Hope",
        "Episode V - The Empire Strikes Back",
        "Episode VI - Return of the Jedi",
        "Episode VII - The Force Awakens",
        "Episode VIII - The Last Jedi",
        "Episode IX - The Rise of Skywalker",
    ];

    drop(event: CdkDragDropstring[]>) {
        moveItemInArray(
        this.movies,
        event.previousIndex,
        event.currentIndex
      );
    }
}

.example-list {
    width: 500px;
    max-width: 100%;
    border: solid 1px #ccc;
    min-height: 60px;
    display: block;
    background: white;
    border-radius: 4px;
    overflow: hidden;
  }

  .example-box {
    padding: 20px 10px;
    border-bottom: solid 1px #ccc;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: move;
    background: white;
    font-size: 14px;
  }

  .cdk-drag-preview {
    border: none;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }

  .cdk-drag-placeholder {
    opacity: 0;
  }

  .cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }

  .example-box:last-child {
    border: none;
  }

  .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }

 cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
  @for (timePeriod of timePeriods; track timePeriod) {
    
 class="example-box" cdkDrag>{{timePeriod}}
  }

import {Component} from '@angular/core';
import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-horizontal-drag-drop',
  templateUrl: 'horizontal.component.html',
  styleUrl: 'horizontal.component.css',
  standalone: true,
  imports: [CdkDropList, CdkDrag],
})
export class HorizontalDragDropExampleComponent {
  timePeriods = [
    'Bronze age',
    'Iron age',
    'Middle ages',
    'Early modern period',
    'Long nineteenth century',
  ];

  drop(event: CdkDragDropstring[]>) {
    moveItemInArray(this.timePeriods, event.previousIndex, event.currentIndex);
  }
}

.example-list {
  width: 54vw;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: flex;
  flex-direction: row;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

.example-box {
  padding: 20px 10px;
  border-right: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: move;
  background: white;
  font-size: 14px;
  flex-grow: 1;
  flex-basis: 0;
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:last-child {
  border: none;
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

 cdkDropList cdkDropListOrientation="mixed" class="example-list" (cdkDropListDropped)="drop($event)">
  @for (item of items; track item) {
    
 class="example-box" cdkDrag>{{item}}
  }

import {Component} from '@angular/core';
import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';

/**
 * @title Drag&Drop horizontal wrapping list
 */
@Component({
  selector: 'app-mixed-drag-drop',
  templateUrl: 'mixed.component.html',
  styleUrl: 'mixed.component.css',
  standalone: true,
  imports: [CdkDropList, CdkDrag],
})
export class MixedDragDropExampleComponent {
  items = ['Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'];

  drop(event: CdkDragDropstring[]>) {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }
}

.example-list {
  display: flex;
  flex-wrap: wrap;
  width: 505px;
  max-width: 100%;
  gap: 15px;
  padding: 15px;
  border: solid 1px #ccc;
  min-height: 60px;
  border-radius: 4px;
  overflow: hidden;
}

.example-box {
  padding: 20px 10px;
  border: solid 1px #ccc;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.87);
  display: inline-block;
  box-sizing: border-box;
  cursor: move;
  background: white;
  text-align: center;
  font-size: 14px;
  min-width: 115px;
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}