<script type="text/javascript"><![CDATA[

        var oldUpdateDrag = zk.Draggable.prototype._updateDrag;

        zk.afterLoad("zk", function () {

            zk.Draggable.prototype._updateDrag = function (pt, evt) {

                oldUpdateDrag.apply(this, arguments);

                var control = this.control,

                    node = this.node;

                if (control.$instanceof(zul.sel.Listitem)) {

                    var listbox = control.getListbox(),

                        dir;

                    if (dir = shouldScroll(node, listbox))

                        startScroll(dir, listbox);

                    else

                        clearScroll(listbox);

                }

            }

        });

        function shouldScroll (node, listbox) {

            var $listbox = jq(listbox.$n('body')),

                $node = jq(node),

                top = $listbox.offset().top,

                itemTop = $node.offset().top;

            if (itemTop < top)

                return 'up';

            else {

                var bottom = top + $listbox.height(),

                    itemBottom = itemTop + $node.height();

                return itemBottom > bottom? 'down' : null;

            }

        }

        function startScroll (dir, listbox) {

            if (!listbox._scrollStarted)

                listbox._scrollStarted = setInterval(function () {

                    var body = listbox.$n('body'),

                        oldValue = body.scrollTop;

                    body.scrollTop += dir == 'down'? 20 : (-20);

                    // can not scroll any more

                    if (body.scrollTop == oldValue)

                        clearScroll(listbox);

                }, 50);

        }

        function clearScroll(listbox) {

            if (listbox._scrollStarted) {

                clearInterval(listbox._scrollStarted);

                listbox._scrollStarted = null;

            }

        }

        ]]></script>

    <window title="scroll while drag" border="normal">

        <listbox id="left" height="150px" width="200px" onDrop="move(event.dragged)" droppable="true"

        oddRowSclass="non-odd">

        <listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

        <listcell label="ZK Forge" />

        </listitem>

        <listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

        <listcell label="ZK Mobile" />

        </listitem>

        <listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

        <listcell label="ZK GWT" />

        </listitem>

        <listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

        <listcell label="ZK JSF" />

        </listitem>

        <listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

        <listcell label="ZK JSP" />

        </listitem>

        <listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

        <listcell label="ZK Spring" />

        </listitem>

        <listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

        <listcell label="ZK" />

        </listitem>

        <listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

        <listcell label="ZK Studio" />

        </listitem>

        <listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

        <listcell label="ZK Jquery" />

        </listitem>

        <listitem draggable="true" droppable="true" onDrop="move(event.dragged)">

        <listcell label="ZK JS" />

        </listitem>

        </listbox>

        <separator />

    </window>

    <zscript>

        void move(Component dragged) {

        if (self instanceof Listitem) {

        self.parent.insertBefore(dragged, self.getNextSibling());

        } else {

        self.appendChild(dragged);

        }

        }

    </zscript>

    <button label="test" draggable="true" />

</zk>