Sorting divs horizontally with jQuery sortable

Question

Hi I am trying to get two divs to be sortable horizontally. I have two problems - first is they don't line up when the page first loads and secondly you can drag them around but the sortable functionality does not work.

I have taken the jQuery example and added a float:left to my two divs.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; width:200px;cursor:pointer;}
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#myColumns" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>
<body>

<ul id="myColumns">
  <li>
    <div style="border:1px solid green;height:300px;width:200px;float:left;"></div>
  </li>
  <li>
    <div style="border:1px solid red;height:300px;width:200px;float:left;"></div>
  </li>
</ul>


</body>
</html>

Any ideas?

UPDATE Following the suggestion of using bootstrap.css I have posted my code which uses nested sortables - both horizonal and vertical.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Portlets</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="bootstrap.css">
  <style>
  .myCol {
  height: 200px;
  width: 250px;
  border: 1px solid;  
  margin:20px;
  padding:10px;
  border-radius:5px;
  overflow-y:auto;
  background-color:#E6E6E6;
}

  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
  $("#myColumns").sortable({
  handle:".handle"
  });
  $("#board1").sortable();
  $("#board2").sortable();
  $("#board3").sortable();
  $("#board4").sortable();
  $("#sortable").disableSelection();
});
  </script>
</head>
<body>

 <table>
 <tR>
 <td style="padding-top:10px;padding-left:40px;">

<div id="myColumns" class="row">
  <div class="myCol">
    <table width="100%">
    <tr>
    <td class="handle" bgcolor="gray">AA</td>
    </tR>
    <tr>
    <td>
    <ul id="board1">
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
    </td>
    </tr>
    </table>
  </div>
  <div class="myCol">
  <table width="100%">
  <tr>
  <td class="handle" bgcolor="gray">BB</td>
  </tr>
  <tr>
  <td>
  <ul id="board2">
      <li>D</li>
      <li>E</li>
      <li>F</li>
    </ul>
    </td>
    </tr>
    </table>
  </div>
  <div class="myCol">
  <table width="100%">
  <tr>
  <td class="handle" bgcolor="gray">CC</td>
  </tr>
  <tr>
  <td>
  <ul id="board3">
      <li>G</li>
      <li>H</li>
      <li>I</li>
    </ul>
    </td>
    </tr>
    </table>
  </div>
  <div class="myCol">
  <table width="100%">
  <tr>
  <td class="handle" bgcolor="gray">DD</td>
  </tr>
  <tr>
  <td>
  <ul id="board4">
      <li>H</li>
      <li>I</li>
      <li>J</li>
    </ul>
    </td>
    </tr>
    </table>
  </div>
</div>

</td>
</tR>
</table>


</body>
</html>

Ali Soltani · Accepted Answer · 2018-01-09 07:39:51Z

2

You can use Bootstrap’s grid system and do it like this:

HTML

<div id="myColumns" class="row">
  <div class="col-sm-4">Col1</div>
  <div class="col-sm-4">Col2</div>
  <div class="col-sm-4">Col3</div>
</div>

JS

$(function() {
  $("#myColumns").sortable();
  $("#sortable").disableSelection();
});

Online demo(jsFiddle)

answered Jan 9, 2018 at 7:39

Ali Soltani

10k5 gold badges33 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ed Mozley Over a year ago

Fantastic thank you - I have fleshed it out so I've used nested sortables. I will paste my code in to my original question as it will be useful for others. Thanks again!

Collectives™ on Stack Overflow

Sorting divs horizontally with jQuery sortable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related