Revision history [back]

Hi nitishamraji,

Please refer to the sample below: ZKFiddle-Link

index.zul

<zk>
    <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>

Regards, ben

Edit:

Code fragment with description ZK Custom Component - Listbox Auto-scroll while Dragging