jQuery UI Widgets Forums Lists ListBox ListBox Drag and Drop Scrolling Problem

This topic contains 5 replies, has 3 voices, and was last updated by  manhbytesoft 5 days, 3 hours ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • ftechhelp
    Participant

    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


    Hristo
    Participant

    Hello ftechhelp,

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

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    ftechhelp
    Participant

    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.


    ftechhelp
    Participant

    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


    Hristo
    Participant

    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

    ListBox Drag and Drop Scrolling Problem #107879

    manhbytesoft
    Participant

    thank

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.