Question

您好我想让两个div可以水平排序。我有两个问题 - 首先是它们在页面首次加载时没有排队，其次你可以拖动它们但是可排序的功能不起作用。

我已经采用了jQuery示例并添加了一个浮点数：左边是我的两个div。

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

有什么想法吗？

更新根据使用bootstrap.css的建议，我发布了使用嵌套sortables的代码 - 水平和垂直。

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

Answer 1

您可以使用Bootstrap’s grid system并按照以下方式执行此操作：

<强> 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)

使用jQuery可排序水平排序div

1 个答案: