DHTMLX Touch documentation

Context details

Drag context

Object, which is available in all drag events,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>
dhx.DragControl.addDrag("drag_1");
 
data1.attachEvent("onBeforeDrop",function(context){
	if (context.from == dhx.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>
dhx.DragControl.addDrop("data_container2",{
	onDrop:function(source, target, d, e){
		var context = dhx.DragControl.getContext();
		var item = context.from.get(context.source[0]);
 
		var d = document.createElement("DIV");
		d.innerHTML = item.Package+" - "+item.Version;
		target.appendChild(d);
	}
});