Drag and Drop

Drag and Drop

Drag and Drop

Drag and drop functionality refers to the ability for users to click and hold on an object (such as an image, file, or element) and move it to a different location by dragging it with the mouse cursor. This interaction allows users to rearrange, reorder, or transfer items within a user interface intuitively. It is commonly used in various applications and websites to enhance user experience by enabling seamless and efficient manipulation of content or elements.

Here is a short video on how Drag and Drop Works:



How to create Drag and Drop Interactive:


To create a Drag and Drop interactive, follow these steps:
  1. Click on the "Create" button located in the Drag and Drop interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Drag and Drop interactive.



  1. Title: Enter a title/name for your Drag and Drop element.
  2. Image: Upload an image for this element or add an external image link. Next: Add alternative text or choose decorative option.

In the Customize menu, you'll find the Drop Zone Layout section, offering two options: custom and fixed.
Drop Zone Layout (Custom):
To create a custom layout, follow these steps:
Add/Edit Drop Zones:
To add, edit, or delete drop zones, click on the designated button, fill in the label and options, and position the drop zone on the image. The Edit button allows for modifications, while the Delete button removes unwanted drop zones. Clicking Save will redirect back to the form interface.


Drop Zone Layout (Fixed):
For the Fixed drop zone layout in the form, there is an additional option called "Draggable Text." You can input your draggable text directly into this field.
Add Section Option for Drag and Drop:
1. The Drag and drop form has collapsible sections. To add a new section, click 'Add Section' and a + icon will appear on the section line stating add section below. Refer to the
images.
2. After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
3. To delete a section, click the 'Delete' icon on the Section Line, confirm the deletion, by selecting 'Remove'.
Please Note:  Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).
Customize Option:
Customization options allow users to personalize and adjust fonts, colors, styles, and spacing to meet specific preferences or branding needs. They enhance visual appeal and usability, ensuring content and interfaces meet diverse user requirements. We support these options for drag and drop.
1. Draggable Area.
2. Drop Zone Area.
3. Button.
Draggable Area:

  1. Type: Choose the type of draggable area, such as Fill, Outline, Pill.

  2. Padding: Adjust the padding around the draggable area to control its spacing from surrounding elements.

  3. Font Family: Our platforms, Loree and Loree Interactive, allow for consistent font changes. Simply use the font dropdown to match your desired design or branding.

  4. Font Size: Adjust font size from 6 to 72 for readability and visual balance within the draggable area.

  5. Font Color: Font color options enhance readability, highlight information, and match branding. Access through a color palette menu. Click on font color option to choose from a color palette or use Hex/RGBA code.

  6. Background Color: Background color options enhance readability and emphasis in a text editor's color palette menu. Choose from a color palette or use specific codes.




Drop Zone Area:

The drop zone area offers customization options for background color and opacity, allowing you to tailor its appearance to fit your needs:

  1. Background Color: Choose a color that suits your design or branding.You can click on background color option, where you'll find a color palette to choose from, or use specific Hex or RGBA codes if you know them.

  2. Opacity: Adjust the transparency level of the background color to control how much of the underlying content shows through.


Button Customization: Includes pill, outline, and pill-shaped buttons with options for rounded edges, transparency, and elongated shape with rounded ends.
Alignment: Set alignment for section header text (left, center, right).
Padding: Measured in pixels, provides space between content and border for improved layout and readability.
Font Family: Option to change font, with consistency across both Loree and Loree Interactive platforms.
Font Size: Options ranging from 6 to 72 available in dropdown menu.
Font Color: Change font color for readability, highlighting, and branding, accessed through color palette or specific codes.
Background Color: Change background color for readability and emphasis, accessed through color palette or specific codes.

                                           

Preview:

The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactive
THANK YOU


    • Related Articles

    • Release notes for Loree A2403.4

      Published on: 22/08/2024 Feature Enhancements Replace/Remove Image Option for Image Slider, Drag and Drop, and Hotspot Interactives Earlier Loree interactives did not have the option to replace images, which made it difficult for clients to change ...

    • Loree Interactives

      Loree Interactive content engages its consumers by requiring active participation. This type of content fosters better interaction between the creator and the audience, making learning easier and more interesting. It presents concepts in an engaging ...

    • Release notes for Loree A2101.2

      Loree editor Loree help section User be able to navigate to user guide from Loree Editor and it will allow the users to Loree Support portal for raise service tickets, be able to view the release notes from help section and check what’s new with the ...

    • Release notes for Loree A2101.4

      Loree Issue fixed in Loree editor Page name mismatch inside the editor As a user, When I use special characters for page name doesn’t display the special characters on Loree editor. Instead, it shows % for all the used special characters. This issue ...

    • Release notes for Loree A2101.3

      Loree Loree Template Pages The Loree introduces new feature that will allow user to create a page with the existing templates they have under ‘My Templates’, ‘Global Templates' and 'Share Template’. User can create a page with the template by click ...