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

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
}

<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;
})

<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);
	}
});

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.