拖放站點選項卡

Question

我試圖製作站點選​​項卡，我可以左右切換其他選項卡。

在鉻你可以移動標籤周圍，這基本上是我想要做的。

這裏是我的HTML至今：

<!-- Compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css"> 
 

 
    <!-- Compiled and minified JavaScript --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script> 
 
      
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
    
 
<style> 
 
.nav-wrapper { 
 
    background-color: #2196f3 ; 
 
} 
 
body { 
 
    background-color: #E3E3E3; 
 
} 
 
.btn { 
 
    background-color: #2196f3 ; 
 
    margin: 20px; 
 
} 
 
</style> 
 

 
<!-- ================================================================== --> 
 

 
<div class="flow-text"> 
 

 
<!-- ================================================================== --> 
 

 
<div class="navbar-fixed"> 
 
    <nav> 
 
     <div class="nav-wrapper"> 
 
     <a href="#!" class="brand-logo"> &nbsp myFeed</a> 
 
     <ul class="right hide-on-med-and-down"> 
 
      <li><a href="//">About</a></li> 
 
      <li><a href="//">Help</a></li> 
 
      <li><a href="//">Account</a> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
</div> 
 

 
<link href="//cdn.muicss.com/mui-0.2.1/css/mui.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="//cdn.muicss.com/mui-0.2.1/js/mui.min.js"></script> 
 

 
<ul class="mui-tabs__bar mui-tabs__bar--justified"> 
 
    <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-justified-1"><i class="fa fa-twitter"></i> Twitter</a></li> 
 
    <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-2"><i class="fa fa-facebook"></i> Facebook</a></li> 
 
    <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-3"><i class="fa fa-instagram"></i> Instagram</a></li> 
 
    <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-4"><i class="fa fa-vine"></i> Vine</a></li> 
 
    <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-5"><i class="fa fa-google-plus"></i> Google +</a></li> 
 
    <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-6"><i class="fa fa-github"></i> GitHub</a></li> 
 
</ul> 
 
<div class="mui-tabs__pane mui--is-active" id="pane-justified-1">Sign In</div> 
 
<div class="mui-tabs__pane" id="pane-justified-2">Sine In</div> 
 
<div class="mui-tabs__pane" id="pane-justified-3">Sign In</div> 
 
<div class="mui-tabs__pane" id="pane-justified-4">Sign In</div> 
 
<div class="mui-tabs__pane" id="pane-justified-5">Sign In</div> 
 
<div class="mui-tabs__pane" id="pane-justified-6">Sign In</div> 
 

 
<!-- ============================================================ --> 
 

 
</div>

這也許可以使用jQuery的一些JavaScript來實現，但我沒試過。

Answer 1

你可以嘗試使用jQuery UI的可排序的功能（更新了下面的例子）：

<!-- Compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css"> 
 

 
    <!-- Compiled and minified JavaScript --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script> 
 
      
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
    
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<style> 
 
.nav-wrapper { 
 
    background-color: #2196f3 ; 
 
} 
 
body { 
 
    background-color: #E3E3E3; 
 
} 
 
.btn { 
 
    background-color: #2196f3 ; 
 
    margin: 20px; 
 
} 
 
</style> 
 

 
<script> 
 
$(function() { 
 
    $("#sortable").sortable(); 
 
    $("#sortable").disableSelection(); 
 
}); 
 
</script> 
 

 
<!-- ================================================================== --> 
 

 
<div class="flow-text"> 
 

 
<!-- ================================================================== --> 
 

 
<div class="navbar-fixed"> 
 
    <nav> 
 
     <div class="nav-wrapper"> 
 
     <a href="#!" class="brand-logo"> &nbsp myFeed</a> 
 
     <ul class="right hide-on-med-and-down"> 
 
      <li><a href="//">About</a></li> 
 
      <li><a href="//">Help</a></li> 
 
      <li><a href="//">Account</a> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
</div> 
 

 
<link href="//cdn.muicss.com/mui-0.2.1/css/mui.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="//cdn.muicss.com/mui-0.2.1/js/mui.min.js"></script> 
 

 
<ul id="sortable" class="mui-tabs__bar mui-tabs__bar--justified"> 
 
    <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-justified-1"><i class="fa fa-twitter"></i> Twitter</a></li> 
 
    <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-2"><i class="fa fa-facebook"></i> Facebook</a></li> 
 
    <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-3"><i class="fa fa-instagram"></i> Instagram</a></li> 
 
    <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-4"><i class="fa fa-vine"></i> Vine</a></li> 
 
    <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-5"><i class="fa fa-google-plus"></i> Google +</a></li> 
 
    <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-6"><i class="fa fa-github"></i> GitHub</a></li> 
 
</ul> 
 
<div class="mui-tabs__pane mui--is-active" id="pane-justified-1">Sign In</div> 
 
<div class="mui-tabs__pane" id="pane-justified-2">Sine In</div> 
 
<div class="mui-tabs__pane" id="pane-justified-3">Sign In</div> 
 
<div class="mui-tabs__pane" id="pane-justified-4">Sign In</div> 
 
<div class="mui-tabs__pane" id="pane-justified-5">Sign In</div> 
 
<div class="mui-tabs__pane" id="pane-justified-6">Sign In</div> 
 

 
<!-- ============================================================ --> 
 

 
</div>