Drag-n-Drop

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

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

There are 5 events which can be used to customize d-n-d behavior:

onBeforeDrag - fires before the mouse button is pressed and moved over the target
onBeforeDragIn - fires before a dragged element is moved over the target
onDragOut - fires when a dragged element is moved outside the list container
onBeforeDrop - fires before a dragged element is released over the target (the mouse button released)
onAfterDrop - fires after drag-n-drop is finished (the item is rendered at the new position)

onBeforeDrag - can contain the rules specifying which elements can be dragged and which cannot. Allows redefining the representation of the item during the dragging.

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

myList.attachEvent("onBeforeDrag",function(context,ev){
    // set custom content for the dragged element
    context.md = "Custom <b>text</b>"; 
});

onBeforeDragIn - allows defining if d-n-d between the source and the target elements is allowed.

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

onDragOut - just informs that the item is moved out, can be used for custom styling.

onBeforeDrop - can be used to implement a custom d-n-d reaction.

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

onAfterDrop - informs that d-n-d operation is finished.

Drag Context

The object which is available in all drag events, it contains:

context = {
    source:[1,2,3], // array of IDs for the dragged elements
    target:id, // ID of the 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 list
</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);
    }
});

D-n-D with Tree and Grid

Firstly, you need to enable the compatibility mode

dhtmlx.compat("dnd");

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

The component isn't able to convert different item types automatically, but it will produce correct d-n-d events which can be used to define a custom reaction on d-n-d.

Dragging List items that contain images

If a list item contains images in it, you need to block image dragging via the ondragstart handler.

An example is given below:

data = new dhtmlXList({
   container:"data_container",
   drag:true,
   type:{
       template:"<img src='#Image#' ondragstart='return false'/> #Text#",          height:100
   }
});
data.parse([
  {"id":"1", "Text":"Item 1", "Image":"image1.png"},
  {"id":"2", "Text":"Item 2", "Image":"image2.png"},
  ...
],"json");