ListBox Drag and Drop Scrolling Problem

[ftechhelpParticipant]

Hello,

I have several ListBox widgets side by side inside a DockPanel. That DockPanel is inside a Panel with scrolling enabled. When I drag an item from one ListBox to another it works. My problem is when I try to drag and item from one ListBox to another ListBox that is not visible and requires scrolling, it does not scroll the panel horizontally when dragging the item to the far right of the Panel. Is there a way to enable Panel scrolling on ListBox item drag?

Thanks,
ftechhelp

[HristoParticipant]

Hello ftechhelp,

Could you provide us with one simplified example that demonstrates your case?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[ftechhelpParticipant]

Hello Hristo,

Please consider the following example:

<script>

    $(document).ready(function(){

        var listBoxSource = [
            { label: "item1", value: "1", group: null },
            { label: "item2", value: "2", group: null },
            { label: "item3", value: "3", group: null },
            { label: "item4", value: "4", group: null }
        ];

        $(".listboxClass").jqxListBox({
            source: listBoxSource, 
            width: 250, 
            height: 500,
            allowDrop: true,
            allowDrag: true,
            checkboxes: true,
            theme: 'web'
        });

        $("#dockPanel").jqxDockPanel({ width: 1250, height: 500, theme: 'web' });
        $("#Panel").jqxPanel({ height: 500, width: 1000, theme: 'web' });

    });

</script>

<div id='Panel'>
    <div id='dockPanel'>
        <div id='listbox1' class='listboxClass' dock='left'></div>
        <div id='listbox2' class='listboxClass' dock='left'></div>
        <div id='listbox3' class='listboxClass' dock='left'></div>
        <div id='listbox4' class='listboxClass' dock='left'></div>
        <div id='listbox5' class='listboxClass' dock='left'></div>
    </div>
</div>

How would I properly drag an item from listbox1 to listbox5? I need the Panel to scroll when trying to drag the item to listbox5.

[ftechhelpParticipant]

I was sort of able to make it work with the following code:

        var scrollInterval;

        function scroll(scrollX, direction){

            clearInterval(scrollInterval);
            scrollInterval = setInterval(function (){

                scrollX += direction == "right" ? 20 : -20;
                $('#Panel').jqxPanel('scrollTo', scrollX, scrollY);

                console.log(scrollX);

            }, 100);

        }

        $("#Panel").mousemove(function(e){

            var thisOffset = $(this).offset();

            var relX = e.pageX - thisOffset.left;
            var relY = e.pageY - thisOffset.top;

            var scrollY =  $('#Panel').jqxPanel('getVScrollPosition');
            var scrollX = $('#Panel').jqxPanel('getHScrollPosition');

            //console.log("X:" + relX + " | Y:" + relY);

            if (relX >= 900)
                scroll(scrollX, "right");
            else if (relX <= 100)
                scroll(scrollX, "left");
            else
                clearInterval(scrollInterval);
        });

If there is a solution in JQWidgets though, I would very much prefer that!

Thanks,
ftechhelp

[HristoParticipant]

Hello ftechhelp,

Unfortunately, there is no such built-in functionality.
Thank you for your understanding.
Please let me know if you have any other questions.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[manhbytesoftParticipant]

thank

[Author]

Posts