HTML tabs drag and drop sample slider?

Question

I need a simple tab system, so if you are mouseDownon its contents, you do not select the html text, but start a sliding tab. If you push more than half, it is assumed that you have moved to the next tab. How to do this with jQuery?

Update: Code Example:

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 a living example of how it works here . What I'm looking for looks like this (link provided by Trufa) But it works not only for images, but also for html tabs ... and it could be easier in physics ... =) Is it possible to change the provided code to any thing i need?

Answer 1

- this?

---

1:

, -, this.

, , .

---