Sometimes pride doesn't let you but I decided to put that aside and ask for some extra opinions from minds like mine! Sorry for the long post, have to analyze my thoughts to explain my issue.
I have been designing an app that contains a huge multi-column list in part of the page like so:
Although it looks like it, it is not render in table, but rather in column lists so that they can be manipulated easier. The screenshot is from a 1920x1080 screen and you can see about 6 columns out of the 60 in this list. The items have to be sortable. I tried different approaches.
a) Currently as you can see in the second column, when hovering on the title 4 icons appear which are: sortable, fix column, sort data, resize column. After a lot of effort I managed to use sorting properly - mainly because of other issues, the list uses a responsive fixed header - however, dragging a list item OFF SCREEN requires you to move the mouse up and down on the side of the screen to move it to the far right.
b) I tried using an 'edit' button with a side-drawer that opens on the right and then use a netflix type sortable: either drag'n'drop element or type it's sort order in the input box. Vertically more items fit on screen and it is easier to scroll screen using a mouse with a draggable object vertically than horizontally. I hate the UX though, I mean a user could think - 'hey, the lists are right there, why not allow us to drag'n'drop the columns? This must be a stupid UI designer'
c) I tried using an edit button that opens a modal and there you have a vertical list similar to the above drawer. This isolates the view which is both good and bad; good because you can easily achieve your task but bad similar to b) above - why be able to resize/fix/sort data in current view but reorder in another view?
I've been bothered by this for far too long, that's why I am here and open to all kinds of ideas. Strangely enough, on mobile things are a lot easier. People EXPECT an action to be taken before being able to issue a sort-drag action. So it's easier to use a button to 'sort' items and sort them. I have created a similar design to another part of the app that works quite nice on mobile - on both iphone and android.
Any suggestions are welcome! From the 3 above solutions, the LEAST BAD is the modal one. However I need something that is not bearable but fun and easy to use!
Edit: Clarifying a couple of things. The table is not a conventional table per se, as it is not rendered as table > row > cell, but rather column > table > row > cell so that each column is an individual element and is allowed to be dragged and dropped easily.
To get things out of the way, the lock fixes a column on the left (as a position:fixed element), sorting works instantly and sorts data in the rows and finally resizing resizes the column width on-the-fly.
I care about functionality on both touch and non-touch devices, but my main concern is re-ordering columns on desktop using MOUSE.
Now the problem is that dragging a whole column from the first position to the last, which can be up to 20000px away is really awkward. Moving the column on the right side of the screen to push it at last position is sluggish and needs the mouse cursor to be moving up and down to continue the scroll.