> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appminis.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Drap & Drop Components

> Hướng dẫn quản lý component trên trang: kéo thả để sắp xếp, bật/tắt hiển thị hoặc xóa.

## **3.2 Drag & Drop Component**

Người dùng nhấn giữ biểu tượng <Icon icon="grid" color="#cfcfcf" size={15} /> tương ứng với từng phần tử và kéo phần tử đến vị trí cần đặt để đạt được thứ tự mong muốn giữa các phần tử, sau đó thả chuột.

<Frame caption="Nút kéo thả thay đổi vị trí">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image115_2cd69e118f.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Sau khi thay đổi thứ tự các phần tử, vị trí các phần tử trong màn hình mô phỏng cũng sẽ thay đổi theo

<Frame caption="Vị trí các phần tử trước khi thay đổi">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image226_1a9c067885.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Bật/tắt hoặc xóa phần tử

### **a. Bật/Tắt hiển thị phần tử trên trang**

Người dùng có thể nhấn vào nút <Icon icon="eye" color="#cfcfcf" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái hiển thị và không hiển thị các phần tử.

<Frame caption="Bật/tắt hiển thị phần tử">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image133_08984e759a.png"
    alt="Icon được khoanh tròn"
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
  />
</Frame>

### **b. Xóa phần tử trên trang**

<Steps>
  <Step title="Nhấn vào nút xóa phần tử">
    Người dùng nhấn vào nút <Icon icon="minus" color="#cfcfcf" size={15} /> để xóa phần tử khỏi trang.

    <Frame caption="Nút xóa phần tử">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image140_2830b31ad0.png"
        alt="Nút xóa phần tử trong giao diện chỉnh sửa"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
        title="Nút xóa phần tử"
      />
    </Frame>
  </Step>

  <Step title="Xác nhận thao tác xóa">
    Người dùng chọn "**Xóa ngay"** để xóa phần tử, hoặc chọn "**Hủy"** nếu không muốn xóa.

    <Frame caption="Nút Xóa ngay và Hủy">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image81_04468588f3.png"
        alt="Nút Xóa ngay và Hủy trong cửa sổ xác nhận"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
        title="Nút xác nhận xóa"
      />
    </Frame>
  </Step>
</Steps>