XUI: Extensible User Interface Framework

Applying Drag-and-Drop to XTable

By the end of this section, you will be able to create an XUI page with xtable components along with its drag and drop capability.

Skills Needed:

Know how to create an XUI page
Know how to use xscript element
Know how to create xtable component
Understand JavaScript method call

Overview
In this example, we will create two xtable components: the first xtable that is located on west panel and the second xtable that is located on the east panel. Then, we will perform drag a row from the first xtable and drop it into second xtable. To create the xtable components, please look at the sample code. This section will concentrate on how to add drag and drop capability to the xtable components.

Figure 1 (xtable components on west and east of the XUI page)

Adding the drag-over and drag-drop attributes and assigning it with specific user-defined JavaScript methods to the target object
1. On the second xtable, add the drag-over attribute and assigned it with a user-defined JavaScript method called dragOverFunc(dragDropEvent) and add the drag-drop attribute and assigned it with dragDropFunc(dragDropEvent).

<xtable 
     id="table2" height="180px" width="350px"
     drag-over="dragOverFunc"  
     drag-drop="dragDropFunc">
     ……
     ……
</xtable>

2. We also include the dragOverFunc(dragDropEvent) and dragDropFunc(dragDropEvent) methods declaration inside the xscript element.

<xscript> 

function startDragFunc(dragDropEvent)
{
    // previously defined above…
}

function dragOverFunc(dragDropEvent)
{
    // get source object (table 1)
    var table1 = dragDropEvent.getSource();

    // get target object (table 2)
    var table2 = dragDropEvent.getTarget();
    
    // only if the source is not the same as the target
    if (table1 != table2)
    { 
        // then display a guide to drop the element 
        table2.displayDropGuide("blue");
    }    
}

function dragDropFunc(dragDropEvent)
{
    // get source object (table 1)
    var table1 = dragDropEvent.getSource();

    // get target object (table 2)
    var table2 = dragDropEvent.getTarget();    

    // only if the source is not the same as the target
    if (table1 != table2)
    {
        // get transfer object from dragDropEvent
        var transferObject = dragDropEvent.getTransferObject();

        // insert the transfer object into table 2 
        table2.insertRow(table2.currentRowIndex,transferObject);

        // remove the row that has been transferred from table 1
        table1.removeRow(table1.selectedRowIndex);
        
        // hide the drop guide because insertion has been completed
        table2.hideDropGuide();
    }    
}
……
</xscript>                
……
<xtable 
     id="table2" height="180px" width="350px"
     drag-over="dragOverFunc"  
     drag-drop="dragDropFunc">
     ……
     ……
</xtable>

The purpose of using the drag-over attribute on the second xtable is to demonstrate one way of providing a user guide. The user guide is a horizontal line that indicates where the dragged item will be inserted. By assigning the dragOverFunc() to the drag-over attribute, this method is triggered automatically and continuously while a user is hovering the mouse over the second xtable. We utilize this behavior to call the second xtable’s displayDropGuide() method that is responsible in displaying the user guide. The default color of the horizontal line is black, but we can override it by passing the preferred color on the method argument.

When writing the user-defined JavaScript method, one good practice is to check that source is the same object as the target (or not the same, depending on the needs). The following fragment codes demonstrate how to do it.

    // get source object (table 1)
    var table1 = dragDropEvent.getSource();

    // get target object (table 2)
    var table2 = dragDropEvent.getTarget();    

    // only if the source is not the same as the target
    if (table1 != table2)
    {
      // your code 
    }

Finally, we utilize the drag-drop attribute to demonstrate how to insert the dragged item into the second xtable. Since we want to make sure that we are inserting the item into the second xtable, we check if target object is not the same as the source object. To insert the dragged item into the second table, we use the table’s insertRow() method. This method takes two arguments. The first argument takes information about the table index of where the item is going to be inserted. This value is available from the second xtable’s currentRowIndex attribute. The second argument takes the transfer object that was set earlier during the drag-drop phase. To get the reference of the transfer object, we use the dragDropEvent.getTransferObject().

After successfully inserting the dragged item into the second xtable, we remove that selected row from the first xtable. To remove a row from the first xtable, we just need to use the first xtable’s removeRow () method. This method takes one argument—the index of the selected row from the first table. This value is also available from the first xtable’s selectedRowIndex attribute. Finally, we hide the user-guide from the second xtable by calling the xtable’s hideDropGuide()method.

Next: Applying Drag-and-Drop to XTree
Back to: Application Guide