拖放站点选项卡

Question

我正在尝试制作可以四处移动以与其他选项卡切换的站点选项卡。

在 chrome 中，您可以移动选项卡，这基本上就是我正在尝试做的。

这是我目前的 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>

拖放站点选项卡

Drag And Drop site tabs

html

css

draggable