Search code examples
htmlcssdraggable

Drag And Drop site tabs

I'm trying to made site tabs that I can move around to switch with other tabs.

In chrome you can move tabs around and that's basically what I'm trying to do.

Here's my HTML so far:

<!-- 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>

This might be able to be done using some JavaScript of jQuery but I haven't tried.

Solution

  • You could try using jQuery UI's Sortable functionality (updated your example below):

    <!-- 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>