Dragging pictures in a slideshow

Dragging pictures in a slideshow

I've googled around for a while but can't find an answer for this. I have
a slideshow type div on my site, where you can use the scrollbar to look
through the images.
<div id="container" style="overflow-x: scroll; overflow-y: hidden; width:
700px; height: 300px;">
<div class="content" style="float: left; width: 700px; height: 300px;
background: url('images/1.png')"></div>
<div class="content" style="float: left; width: 700px; height: 300px;
background: url('images/2.png')"></div>
<div class="content" style="float: left; width: 700px; height: 300px;
background: url('images/3.png')"></div>
</div>
just so you get the idea.. What I'd like to do is have the user able to
use their mouse on the picture itself and swipe the divs, instead of using
the scroll bar. Im assuming this would use jquery with drag and drop.
honestly I don't really know where to start, any ideas?