DHTMLX Docs & Samples Explorer

Index
dhtmlxDataView

## Drag-n-Drop

To enable drag-n-drop you need to set the drag property.

        view = new dhtmlXDataView({
    		container:"data_container",
    		type:{
    	            template:"#Package# : #Version#<br/>#Maintainer#"
    	        },
                    drag:true
        });
        view.load("../common/data.xml");

There are 5 events which can be used to customize d-n-d behavior. The order of events are next:

Drag getsture started (onBeforeDrag) item draged on target (onBeforeDragIn) and out of it (onDragOut) , on the next item (onBeforeDragIn), mouse button released (onBeforeDrop) and item rendered at new position (onAfterDrop)

- onBeforeDrag - can contain rules, which elements can be draged and which are not. Allows to redefine representation of the item during dragging.

        view.attachEvent("onBeforeDrag",function(id, context,e){
            if (this.get(id).some_property) return false; //deny dnd
            return true; //allow dnd
        });

        view.attachEvent("onBeforeDrag",function(id, context,e){
            //set custom content for dragged element
            context.html = "Custom <b>text</b>";
        });

* onBeforeDragIn - allows to define is dnd between source and target elements is allowed

        view.attachEvent("onBeforeDrag",function(id, context,e){
            if (this.get(id).some_property) return false; //deny dnd
            return true; //allow dnd
        });

* onDragOut - just informs that item is moved out, can be used for custom styling * onBeforeDrop - can be used to implement custom d-n-d reaction

        view.attachEvent("onBeforeDrop",function(context){
            //custom data moving
            this.move(context.source, this.indexById(context.target));
            return false; //block default processing
        });

- onAfterDrop - informs that dnd operation is finished

### Drag context

Object, which is available in all drag events, it contains

    context = {
        source:[1,2,3], //array of IDs for dragged elements
        target:id, //ID of currently active target item
        from:some_obj, // reference to the source object
        to:some_obj, // reference to the target object
        html:text //optional, custom text, which is rendered as drag-item
    }

### Drag from custom HTML

    <div package="DragPackage" version="1.0" maintainer="dhtmlx Team"
    	id="drag_1"
    	style='width:150px; height:50px; color:white; background-color:navy;'>
    	Drag me into the dataview
    </div>

    dhtmlx.DragControl.addDrag("drag_1");

    data1.attachEvent("onBeforeDrop",function(context){
    	if (context.from == dhtmlx.DragControl){
    		this.add({
    			Package:context.source.getAttribute("package"),
    			Version:context.source.getAttribute("version"),
    			Maintainer:context.source.getAttribute("maintainer")
    		},this.indexById(context.target||this.first()));
    		return false;
    	}
    	return true;
    })

### Drag to custom HTML

    <div id="data_container2" style="width:400px;height:396px;border:1px solid red;">
    	Drop some item here
    </div>

    dhtmlx.DragControl.addDrop("data_container2",{
    	onDrop:function(source, target, d, e){
    		var context = dhtmlx.DragControl.getContext();
    		var item = context.from.get(context.source[0]);

    		var d = document.createElement("DIV");
    		d.innerHTML = item.Package+" - "+item.Version;
    		target.appendChild(d);
    	}
    });

### DnD with dhtmlxTree, dhtmlxGrid

You need to enable compatibility mode by

        dhtmlx.compat("dnd");

After that you will be able to drag items between dataview, grid and tree

Component doesn't able to convert different item type automatically, but will produce correct d-n-d events, which can be used to define custom reaction on d-n-d.