logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.26.1
  • Ant Design
    • Introduction
    • Design Values
    • Cases
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • Visualization
  • Motion
  • Illustrations
In-Page Editing
Drag and Drop

Make it Direct

contributors
    • RepetitionStay on the Page

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    X
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    As Alan Cooper states：「Where there is output, let there be input」. This is the principle of direct manipulation. eg：Instead of editing content on a separate page, do it directly in context.

    In-Page Editing

    Example of click to edit
    Preview
    Example of click to edit
    Status 1: Common browsing mode, do not distinguish between editable and non-editable lines；
    Status 2: On mouse hover, the background is backlit with yellow. A tool tip invites the user to 'Click to edit'；
    Status 3: Once the user clicks on the title, the form elements 「Input box」, 「OK」 and 「Cancel」 appear, and the cursor is positioned in the 「input box」.

    Single-Field Inline Edit

    If 「readability」 is more important than 「editability」, 「click to edit」 can be used.


    Example of Text link/Icon Edit
    Preview
    Example of Text link/Icon Edit
    Status 1: Text link/icon appears near the editable line.；
    Status 2: Once the mouse clicks 「edit」,the form elements 「Input box」, 「Ok」 and 「Cancel」 appear, and the cursor is positioned in the 「input box」.

    If the priority is given to 「readability」 and the 「editability」 of operation lines need to be highlighted at the same time, 「text link/icon edit」can be used.


    Example of Multi-Field Inline Edit
    Preview
    Example of Multi-Field Inline Edit
    Edit mode without destroying integrity can enlarge the space in order to put down the 「Input box」 and other form elements. Besides, when switching the edit mode in the Table, it is necessary to ensure that each column does not beat.

    Multi-Field Inline Edit

    Note：In「Multi-Field Inline Edit」, there are huge different between the content and required field, So it is more needed to use the 「Explain What Just Happened」 in 「Use Transition」to eliminate this visual effects.


    Drag and Drop

    Example of Drag and Drop List
    Preview
    Example of Drag and Drop List
    Status 1: On mouse hover,a removable 「icon」 appears.；
    Status 2： When hovering over the 「icon」, the pointer changes into a 「hand」, click-and-drag operation can be used；
    Status 3：Drag target to the placeable block. When blue stroke appears, inform user that object can be placed in the block.

    Drag and Drop List

    Drag and Drop can only be limited in one dimension（upper/down or left/right）


    Example of Drag and Drop picture/file
    Preview
    Example of Drag and Drop picture/file

    Drag and Drop picture/file