auto scroll table on dragging of row

Question

I have spent some time searching and unable to find a solid solution without using buttons. I have a table that is X height and has many rows. I can simply scroll no problem, and with the plugin I am using I can reorder the rows. I am looking for a way to drag a row from one area of the table to another and if needed scroll the table in the correct direction. I am looking to do something like a OS desktop folder.

Plugin being used for reorder

Answer 1

I imagine adding a "mousemove" event to all elements while you're dragging the row.

Every time you move the mouse, you check if it's within (100 / 200 / 300)px of the window edge, start an interval loop (setInterval) that moves the screen by x pixels every y seconds.

You need to make sure that once you drop the row that you stop the interval loop and remove the mousemove event handlers from all elements. When you move out of the range near the edge of the window should also stop the interval loop.

If you want an idea of what the code would look like, I'll create a fiddle, let me know.

Answer 2

This is what I ended up doing:

    $("#table-3 tr").mousedown(function() {
        $(this).mousemove(function(e) {
            // moving upward
            if (e.pageY < mY) {
                console.log('From Bottom');
                clearInterval(intervalLoop);
                intervalLoop = setInterval(function() { 
                    $('#table-3').scrollTop($('#table-3').scrollTop() - 1);
                }, 25);
            // moving downward
            } else {
                console.log('From Top');
                clearInterval(intervalLoop);
                intervalLoop = setInterval(function() { 
                    $('#table-3').scrollTop($('#table-3').scrollTop() + 1);
                }, 25);
            }
            // set new mY after doing test above
            mY = e.pageY;
        });
    }).mouseup(function() {
        $("#table-3 tr").unbind('mousemove');
        clearInterval(intervalLoop);
        intervalLoop = 0;
    });

Answer 3

Basicaly if you want to build your own functionality, you'll have to add it on to the unsupporting plugin you are using. Analyze that library to see what design patterns they use, thus knowing where they define theyr functionality. once you figured that out, and you know what road the developers chose to build their plugin you can expand it.

lets say you click on A than drag to B and release the mouse a pseudo code for a function like that could be something like:

1) on mouse down event, check if the target is A

2) if its A, save a refferance to A object in a var, and save its innerHTML in a variable.

3) on mouse up event, check if the target is B

4) if its B, copy its innerHTML to the A's innerHTML, than copy the saved innerHTML ofA into B

You can also use the drag and drop API html5 standart defined for html elements, to catch the drop event.

memory menegment wise you should attach a single event handler to handle of the table element events, this is beacuse if you have 100 tags for example you dont want 100 event listeners saved in memory. in jQuery you can use $(elem).delegate();