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. Enter a title for your Drag and Drop element in the Interactive Title field.
  2. Then, click “Click here to add an image” to upload an image or add one using an external link. Once added, don’t forget to include alternative text or mark the image as decorative if it doesn’t need a description.

Customizations

  1. 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:
  1. To add, edit, or delete drop zones, simply click the drop zone button, enter your label and options, and place the zone on the image.
  2.  Use Edit to make changes or Delete to remove a zone. When you're done, click Save to return to the main form.
 





Drop Zone Layout (Fixed):

  1. For the fixed drop zone layout, you’ll see an extra option called Draggable Text. Just type your draggable text into this field, and it will appear as the item users can drag into the drop zones.


Add Section Option for Drag and Drop

  1. The Drag and Drop form uses collapsible sections for easy organization.
  2. To add a new section, click Add Section, and a plus icon will appear showing where you can insert it. After adding a section, you can move it up or down using the arrow icons.
  3. If you need to remove a section, just click the Delete icon and confirm by selecting Remove.


Notes
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 Options

Customization options let you tailor fonts, colors, styles, and spacing to match your design or branding needs. These settings help improve both visual appeal and usability. All of these customization features 1. Draggable Area. 2. Drop Zone Area. 3. Button are available for the Drag and Drop interactive.
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 the 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 can be customized to match your design.

  1. Background Color: You can change the background color using the color palette or by entering Hex or RGBA codes.

  2. Opacity: You can also adjust the opacity to control how transparent the drop zone appears, letting more or less of the image show through.


 Button Customization

Supports button styles like pill, outline, and pill-shaped, with options for rounded edges, transparency, and elongated shapes.

  1. Alignment: Set the section header text alignment to left, center, or right.

  2. Padding: Add space inside the element (in pixels) to improve layout and readability.

  3. Font Family: Choose from available fonts, consistent across Loree and Loree Interactive.

  4. Font Size: Select from a range of sizes (6 to 72) in the dropdown menu.

  5. Font Color: Change text color using the color palette or by entering Hex/RGBA codes.

  6. Background Color: Adjust the background color for emphasis or readability using the palette or specific color 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 ...