Other answers have adequately addressed the skeuomorphic inspiration for this convention, but since the question also asked about history, let's look at that a bit.
I'd nominate Macintosh System 7.0 (1991, but I vaguely recall the UI style being widely previewed before then) as the originator of this convention... you see the ridging in active scroll bar thumbs:
This clearly follows the same real-world affordance for sliding in a direction perpendicular to the ridges, as seen in the other answers here with battery covers and such.
A quick survey of pre-1991 GUIs (including Xerox Alto, Apple Lisa, Amiga Workbench, Windows 1.x-3.0, Mac System 1.0-6.0.x) suggests the System 7 scrollbars might be the first UI elements to indicate draggability in this way... in predating and contemporary systems, draggable elements like scrollbars and title bars tend to be flat (or beveled to create a 3D effect, but not a "grippy" texture).
One might also nominate the original Macintosh window title bars (1984) as an even earlier originator for this convention (shown below in both original and System 7 appearances):
However, I'm not sure it's quite the same — here we have a very wide surface of "grippy" lines on something you can drag in any direction, not a small "grippy" area indicating the ability to drag in one specific direction. I'd say the horizontal lines here serve more as an indication of which window is active than as an affordance to indicate draggability.