Outsourcing software development is one of the logical decisions for many companies. The key point is finding reliable offshore vendor to work with. Being an experienced company in outsourcing software development, Belitsoft guarantees effective collaboration.
Getcomponent is professional asp .net component development vendor GetComponent is a new ASP .NET component development vendor brand specializing in design and development of user interface (UI) and data visualization application for the Microsoft ASP.NET platform. ASP .NET component development is something we know everything about and we are ready to share this knowledge with our customers.
Web parts for SharePoint
Joomla solutions and authoring tools for custom eLearning
 
   
 
  
You currently
have 0 item(s)

in your shopping cart.
Who's Online
We have 115 guests and 12 members online

Help PDF Print E-mail

Joomla Drag&Drop Component ver.2.0.0 allows to manage online content by means of creating a dynamic area inside the template, where the displayed modules can be easily dragged into different locations within the area. The modules positions are stored on each relocation allowing a user to view them at the exact spots next time he visits the site. This means that every user can arrange the site modules according to his own taste and convenience.

1. Component Main Menu

1.1 Modules Drag&Drop

This section allows to create new modules, edit and delete previously added ones; publish and unpublish them.

To add a new module:

  1. Go to Components>JoomDrag&Drop>Modules Drag&Drop.

  2. Select the New () button in the top right toolbar. You’ll see the following window:

  3. Fill in the fields of the Options tab:

    • Title – input the title of the newly created module;

    • Description – type in the description of the module if necessary; it will be shown as a hint when pointing at the item.

    • Logo Module – you may browse an image that will be displayed in the top left corner of the module;

    • Icon – you may browse an image that will be displayed in the left corner of the header of the module;

    • Module – from the drop-down menu select one position that this module will be assigned to.

    • Show Title Joomla Module – select Yes if you want the Title Joomla Module to be shown; otherwise select No;

    • Published – select Yes if you want the module to be published; otherwise select No.

    You will be able to preview the created module in the View tab.

  4. Press Save () at the top of the page to save the changes or the Apply icon () to save and stay on the same page; click the Cancel icon () to discard changes.

    To edit a module:

    1. Go to Components>JoomDrag&Drop>Modules Drag&Drop.

    2. Press the module’s link in the list of modules or check the box next to it and press the Edit () button in the top right toolbar.
    3. Modify the module’s settings.

    4. Save the changes.

    To delete a module, check the box next to it and press the Delete () button in the top right toolbar. To publish/unpublish a module, check the box next to it and press the Publish/Unpublish (/) buttons or just press the red cross in the corresponding Published column next to the necessary item.

1.2 List Drag&Drop

The List Drag&Drop page displays all created drag&drop items whether they are published or not and allows to manage them by creating new items, editing already existing ones and deleting them.

To create a new item:

  1. Go to Components>JoomDrag&Drop>List Drag&Drop.

  2. Select the New () button in the top right toolbar. You’ll see the following window:

  3. Fill out the tabs’ fields as described in the table below:

    Field Step
    Name Enter the name of the newly created drag&drop item. Note that the item will not be saved unless it has a name.
    Description Enter the text describing the newly created drag&drop item. It will be displayed when pointing out on the item in the List Drag&Drop.
    Published Select Yes if you want the item to be published; otherwise select No.
    The Options tab
    Height Drag&Drop Header The field allows a user to adjust the height of the block header. You will be able to move the block beyond these bounds. Note that the adjustment is set in pixels.
    Padding columns (left, right, top, bottom) Padding is set for each block created in the Structure tab. The field allows a user to adjust the size of each block’s indents. Note that the adjustment is set in pixels.
    Size DIV Column #1,2,... The field allows a user to set the width of each column that contains a block. It can be set either in pixels or in percentage of the block's output area width. Note that this option becomes available after you have saved the structure of the modules positions.
    Type cursor From the drop-down list you can select the type of cursor amongst the crosshair, move, pointer or default.
    The Structure tab
    Choose modules display default Allows a user to arrange modules into a matrix-form. To create the first element you need to press the pluses of the first column and the first row. After doing that a drop-down list with all the possible positions will be displayed, you’ll just need to select one of them for each of the elements. (To create the list of the modules’ positions, go to Site>Templates Manager>Modules Drag&Drop).
  4. Press Save () at the top of the page to save the changes or the Apply icon () to save and stay on the same page; click the Cancel icon () to discard changes.

To edit module’s position:

  1. Go to Components>JoomDrag&Drop>List Drag&Drop.

  2. Press the item’s link in the list or check the box next to it and press the Edit () button in the top right toolbar.

  3. Modify the module’s positions settings.

  4. Save the changes.

To delete an item, check the box next to it and press the Delete () button in the top right toolbar. To publish/unpublish an item, check the box next to it and press the Publish/Unpublish (/) buttons or just press the red cross in the corresponding Published column next to the necessary item.

1.3 Menu Manager

The Menu Manager displays all the existing menu items. The list contains the MenuName, the MenuItem, and the Drag&Drop Item columns. To work with the list of drag&drop items go to Configuration => List Drag&Drop in the left menu.

In the Drag&Drop Item column next to each menu item you'll see a drop-down list, where you can select the Drag&Drop item. To save the changes click the Save icon () at the top of the page. If in the template settings a specific template is assigned to any menu item to display drag&drop components, then in the MenuManager you'll need to select which drag&drop structure should be displayed for the specific item of the main menu (ex. mainmenu).

1.4 Settings

This is a section that’s got detailed settings of a module and its icons. Navigate to Components>JoomDrag&Drop>Settings and specify the form as follows:

Field Step
Location of the modules Period of keeping of the location of the modules You may select from the drop-down list a period of time from 5 days up to 1 year when the layout of the modules will be saved for the end-user just the way he set it in the front-end. When the defined period is over, the default layout of the modules is set back.
Add modules Allow user to add to modules? Select Yes if you want to allow users to add modules; otherwise select No.
List Length Modules This option allows to set pagination of the modules in the front-end, i.e. by selecting a certain number from the drop-down menu you will enable the end-user switching to the next and previous pages with modules if there are many of them.
Minimize/Maximize Icons Maximize Icon Minimize Icon There are standard set icons for maximizing and minimizing the modules. However, you may delete them by checking the box next to Delete and replace them with your customized by browsing it on your computer.
Tell a friend Tell a friend icon (open) Tell a friend icon (close) There are standard set icons for telling a friend about the module. However, you may delete them by checking the box next to Delete and replace them with your customized by browsing it on your computer.
Color background (for the ‘Tell a friend’ form) You may type in the number of the color or choose it on the palette by clicking on the icon.
Delete Icon Module Delete Icon There is a standard set icon for deleting a module. However, you may delete it by checking the box next to Delete and replace with your customized by browsing it on your computer.

2. Integration

To use the Drag&Drop component, you'll need to create an additional template. To connect and launch the component you must type in the following lines into the area where the Drag&Drop modules should be displayed:

You will as well need to assign the display of the specific template on those menu items that will contain the set Drag&Drop items in the MenuManager of the component, if there is a need to display Drag&Drop modules there.