[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

[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.

[Author]

Posts