Drag-and-Drop Effects

There are two levels to customize the drag-and-drop effects: per-widget and browser-level.

Per-Widget Customization

Widget has a set of methods for handling drag-and-drop. You could customize them based on your requirement.

If you want to customize a particular widget, you could do as follows.

var superwgt = {};
zk.override(wgt, superwgt, {
    initDrag_: function () {
        //your implementation
        superwgt.initDrag_.apply(this, arguments); //if you want to call back the default implementation
    }
});

If you want to override all widgets of particular class, say, Combobox, you could do as follows.

var supercomobox = {};
zk.override(zul.inp.Combobox.prototype, supercomobox, {
    initDrag_: function () {
        //your implementation
        supercomobox.initDrag_.apply(this, arguments); //if you want to call back the default implementation
    }
});

If you override Widget, then all widgets are affected.

---

Browser-level Customization

DnD provides a collection of drag-and-drop utilities. By customizing it, all widgets in the same browser will be affected.

For example, if you would like customize ghosting" of the DOM element being dragged, you could override DnD.ghost(Draggable, Offset, String) as follows.

var superghost = zk.DnD.ghost;
zk.DnD.ghost = function (drag, ofs, msg) {
    if (msg != null)
        return superghost(drag, ofs, msg);
   //do whatever you want
}

Version History

Version	Date	Content