---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/editing/drag-and-drop'
title: '将元素拖到合适的位置 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:52:16+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  您可以拖动元素、行和版块，
  将它们放到想要的位置。可以沿列上下移动，
  或移到另一列或另一个版块。新元素会落在所属列的顶部，
  因此拖动是为它们排序的快捷方式。本例将一个
  Book a free consultation 按钮拖到其所属文本的下方。
tags:
  - 'Edit a page'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 将元素拖到合适的位置
      description: |-
        您可以拖动元素、行和版块，
        将它们放到想要的位置。可以沿列上下移动，
        或移到另一列或另一个版块。新元素会落在所属列的顶部，
        因此拖动是为它们排序的快捷方式。本例将一个
        Book a free consultation 按钮拖到其所属文本的下方。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:52:16+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/editing/drag-and-drop'
      articleSection: 编辑页面
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/editing/drag-and-drop'
      description: |-
        您可以拖动元素、行和版块，
        将它们放到想要的位置。可以沿列上下移动，
        或移到另一列或另一个版块。新元素会落在所属列的顶部，
        因此拖动是为它们排序的快捷方式。本例将一个
        Book a free consultation 按钮拖到其所属文本的下方。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[编辑页面](/zh-hans/hc/documentation/learn-dxpr-builder/editing) # 将元素拖到合适的位置.

 学习 DXPR Builder搭建页面编辑页面

   ## 本指南内容

 相关指南

- [复制和粘贴元素](/zh-hans/hc/documentation/learn-dxpr-builder/editing/copy-paste)
- [找到要编辑的页面部分](/zh-hans/hc/documentation/learn-dxpr-builder/editing/selecting-elements)
- [添加行](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)

您可以拖动元素、行和版块， 将它们放到想要的位置。可以沿列上下移动， 或移到另一列或另一个版块。新元素会落在所属列的顶部， 因此拖动是为它们排序的快捷方式。本例将一个 **Book a free consultation** 按钮拖到其所属文本的下方。

  ## 拖动元素

1. 将鼠标悬停在元素上，显示其控制栏。
2. 按住拖动手柄，即控制栏左侧带元素名称的点状握把。
3. 将元素拖到新位置。条纹占位符会显示其落点。
4. 松开鼠标按钮，将其放在那里。
5. 点击工具栏上的 **Save**，保存页面。

在本例中，每个元素还在其样式面板中设置了 48 像素的上边距。

## 可以放置的位置

元素可以落在同一列中两个元素之间、另一列中， 或直接落在另一个版块中。它还可以放入容器元素， 例如选项卡或折叠面板。同一页面上的任何 DXPR Builder 区域也都接受它。

## 移动版块、行或列

版块和行在其控制栏上有相同的手柄。沿页面上下拖动版块， 或将行拖入另一个版块。列保留在其行中：左右拖动列的手柄， 可与其相邻列交换位置。

## 不拖动也能移动

点击元素控制栏中的元素名称将其选中。按 Ctrl+Up 或 Ctrl+Down （在 Mac 上用 Cmd）可将其移动一个位置。对于列，请按 Ctrl+Left 或 Ctrl+Right。**More** 菜单中有与 **Move Up** 和 **Move Down** 相同的移动操作。

## 您会看到的内容

拖动时，元素的副本会跟随指针，条纹占位符标记落点。 放置后，元素位于新位置，列的其余部分会在其周围合拢。 **Save** 按钮上的圆点表示更改尚未保存。

## 如果您没有看到元素移动

- **拖动时没有任何移动。**您按在了元素本身上， 而不是其手柄上。请按住带元素名称的点状握把。
- **想要的位置在屏幕之外。**只有当指针靠近窗口边缘时页面才会滚动。 请将指针移到顶部或底部边缘附近并等待。
- **列无法离开其所在的行。**列只能在其行内交换位置。 请改为将列内的元素拖到另一行。
- **Positioned layers 中的元素不显示占位符。**这些元素在画布上自由放置。 请参阅[Positioned layers](/zh-hans/hc/documentation/learn-dxpr-builder/layout/positioned-layers)。
- **元素落在了错误的位置。**按 Ctrl+Z （在 Mac 上按 Cmd+Z）撤销放置。

## 接下来做什么？

- [复制和粘贴元素](/zh-hans/hc/documentation/learn-dxpr-builder/editing/copy-paste)：复制元素而不必移动它。
- [选择元素](/zh-hans/hc/documentation/learn-dxpr-builder/editing/selecting-elements)：找到列、行或版块的手柄。
- [行与列](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)：更改行的列布局。