Documentation
Advanced

Defining Drag Area

Predefined drag area is usedful when using drag-n-drop on touch devices as slide movements over drag area will be interpreted as dragging rather than scrolling.

Related sample:  Drag and Drop with Drag Handle

By default any draggable item or component can be dragged by clicking and holding left mouse on any of its areas, but sometimes it looks more convenient to define a separate area that will be the only place you can click to drag the item.

Such area may be defined by icon on the item included into the item data template.

Create an icon

<style type="text/css">
    .webix_drag_handle{
    background-image:url(./handle.png); // path to the image icon
    background-repeat: no-repeat;
    cursor:n-resize; //type of the cursor to signify DnD ability
            }
</style>

Define drag area

webix.ui({
    view:"list", 
    template: "#data#<div class='webix_drag_handle'></div>"
    on:{
        onBeforeDrag:function(data, e)
        return (e.target||e.srcElement).className == "webix_drag_handle";
        }
 });

OnBeforeDrag event triggers a function that sets 'webix_drag_handle' class for both target and source elements.

Drag Area with Datatable

To define a drag area for Webix Datatable you should either add template to some column or add a separate column with drag area CSS:

view:"datatable",
drag:true,
columns:[
    { id:"title",   fillspace:true, header:"Film title" },
    { id:"drag", header:"", template:"<div class='webix_drag_handle'></div>", width:35}
]

Related sample:  Limiting the draggable area for items (dragging rows)

In case of column drag-n-drop, drag area can be defined as well:

view:"datatable",
dragColumn:true,
columns:[
    { id:"votes", header:"<div class='webix_drag_handle'></div>Votes", width:120},

Related sample:  Limiting the draggable area for items (dragging columns)

Related Articles

Back to top