Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts

  • 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


    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.

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