HTML tabs drag-drop slider sample?

Question

What I need is a simple tab system such that if you mouseDown on its contents you do not select html text but start sliding tab. If you slide more than half it assumes you slid to next tab. How to do such thing with jQuery?

Update: Sample code:

JS:

var $tabs = $('.tab');
var $contents = $('.content');

var contentWidth = $contents.eq(0).outerWidth(true);
var $slider;

var DURATION = 600;
var EASING_METHOD = 'easeInOutCubic';


$tabs.data('currentTabId', 1);


$slider = $contents.wrapAll('<div />').parent();
$slider.css({ 'width' : contentWidth * $contents.length,
              'marginLeft' : 0 });



function calcMargin(distance) {
  var margin = parseInt($slider.css('marginLeft').replace('px', ''), 10);
  return margin + contentWidth * distance * -1;
}


function changeTab(tabId) {
  var distance;


  if($tabs.data('currentTabId') !== tabId) {

    distance = tabId - $tabs.data('currentTabId');


    $slider.stop(true, true);  
    $slider.animate(
      { 'marginLeft' : calcMargin(distance) },
      { duration : DURATION, easing : EASING_METHOD }
    );


    $tabs.data('currentTabId', tabId);    
    $tabs.removeClass('current');
    $tabs.filter('#tab' + tabId).addClass('current');
  }
}



$tabs.click(function() {
  changeTab($(this).attr('id').slice(3));
});

HTML:

<div class='tabs'>
  <div class='tab current' id='tab1'>tab1</div>
  <div class='tab' id='tab2'>tab2</div>
  <div class='tab' id='tab3'>tab3</div>
</div>

<div class='contents'>
<div class='content' id='content1'>
  <div class='inner'>
    content1
  </div>
</div>

<div class='content' id='content2'>
  <div class='inner'>
    content2
  </div>
</div>

<div class='content' id='content3'>
  <div class='inner'>
    content3
  </div>
</div>
</div>

CSS:

body {
  margin: 0;
  padding: 20px;
  font-family: sans-serif;
}

.tabs {
}

.tab {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid #333;
  border-bottom: none;
  border-radius: 15px 10px 0 0;
  margin: 0 5px;
  cursor: pointer;
}

.tab.current {
  background: #90bfff;
}

.contents {
  overflow: hidden;
  width: 400px;
  height: 300px;
  border: 1px solid #333;
}

.content {
  float: left;
  margin-right: 10px;
  width: 400px;
  height: 300px;
}

.content .inner {
  padding: 20px;
  font-size: 35px;
}

And live sample of how it works Here. What I am looking for looks like this (link provided by Trufa) But works not just for images but also for html tabs... and can be simpler in physics...=) Is it possible to modify provided code to any thing near that thing I want?

Answer 1

You mean something like this?

---

UPDATE 1:

I don't have much free time, but I'm trying to build something, based on this.

BTW I can't believe there is nothing or already built.

---