HTML标签拖放滑块示例？

Question

我需要的是一个简单的标签系统,如果您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('<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;
}

并现场样本如何工作在这里.我正在寻找的东西看起来像这样(由Trufa提供的链接)但不仅适用于图像而且适用于html标签......并且在物理上可以更简单... =)是否可以将提供的代码修改为附近的任何东西那个我想要的东西？

Answer 1

你的意思是这样的吗？

更新1：

我没有太多空闲时间，但我正在尝试在此基础上构建一些东西。

顺便说一句，我不敢相信什么都没有或已经建成。