html怎么做可以下拉滑块,HTML标签拖放滑块示例？

我需要的是一个简单的标签系统，如果您对其内容mouseDown，则不要选择html文本，而是开始滑动标签。如果滑动超过一半，则假定您滑动到下一个选项卡。如何使用jQuery做这样的事情？

的更新的

示例代码：

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('

$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：

tab1

tab2

tab3

content1

content2

content3

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;

}

现场样本it works Here。我正在寻找的内容like this (link provided by Trufa)但不仅适用于图像，也适用于html标签...并且在物理上可以更简单... =)是否可以将提供的代码修改为附近的任何东西我要什么？