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.

Here is a list of methods you could override. For a complete list, please refer to Widget.

Method	Description
Widget.dropEffect_(boolean)	Called to have some visual effect when the user is dragging a widget over this widget and this widget is droppable. Notice it is the effect to indicate a widget is droppable.
Widget.onDrop_(Draggable, Event)	Called to fire the onDrop event. You could override it to implement some effects to indicate dropping.
Widget.getDragOptions_(Map)	Returns the options used to instantiate Draggable. There are a lot you could customize with this method, since the options control many effects, such starteffect, endeffect, change and so on. Please refer to Draggable and the source code for more information.
Widget.cloneDrag_(Draggable, Offset)	Called to create the visual effect representing what is being dragged. In other words, it creates the DOM element that will be moved with the mouse pointer when the user is dragging.
Widget.uncloneDrag_(Draggable)	Undo the visual effect created by Widget.cloneDrag_(Draggable, Offset). In other words, it removes the DOM element that was created.

---

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