Question

我需要将粉红色的第1部分，第2部分，第3部分从beign中排除，因为它们是我的列的标题，它们需要保持在那个确切的固定位置。我怎样才能做到这一点？我尝试使用取消，但我真的不知道放在哪里。

如果您发现任何写得不好的东西，请原谅我，如果您有时间，请通知我。我刚刚开始，我对此非常不满。

＆＃13;

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    #main-container {
      background-color: green;
      width: 100%;
      height: 100%;
      margin: auto;
    }
    .column-div {
      width: 300px;
      height: 100%;
      float: left;
      margin-right: 10px;
    }
    .column-name {
      width: 100%;
      height: 30px;
      text-align: center;
      background-color: pink;
    }
    .user {
      width: 100%;
      height: 50px;
      background-color: gray;
      border: 2px solid yellow;
    }
    #aqua {
      background-color: aqua;
    }
    #red {
      background-color: red;
    }
    #orange {
      background-color: orange;
    }
  </style>
</head>

<body>
  <div id="main-container">
    <div class="column-div" id="aqua">
      <div class="column-name">
        Part 1
      </div>

      <div class="user">

      </div>

      <div class="user">

      </div>

      <div class="user">

      </div>

    </div>

    <div class="column-div" id="red">
      <div class="column-name">
        Part 2
      </div>
    </div>
    <div class="column-div" id="orange">
      <div class="column-name">
        Part 3
      </div>
    </div>
  </div>

  <script type="text/javascript">
    $(function() {
      $(".column-div").sortable({
        connectWith: ".column-div"
      }).disableSelection();
    });
  </script>

</body>

</html>

＆＃13;

Answer 1

有一个项目允许您设置可排序的选择器这是文档sortable items documetation

的链接

在你的情况下它会像

$(".column-div").sortable({
    connectWith: ".column-div",
    items: '.user'
  }).disableSelection();

Answer 2

使用cancel属性取消列名的排序

$(function() {
  $(".column-div").sortable({
    connectWith: ".column-div",
    cancel:".column-name"
    
  }).disableSelection();
});

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    #main-container {
      background-color: green;
      width: 100%;
      height: 100%;
      margin: auto;
    }
    .column-div {
      width: 300px;
      height: 100%;
      float: left;
      margin-right: 10px;
    }
    .column-name {
      width: 100%;
      height: 30px;
      text-align: center;
      background-color: pink;
    }
    .user {
      width: 100%;
      height: 50px;
      background-color: gray;
      border: 2px solid yellow;
    }
    #aqua {
      background-color: aqua;
    }
    #red {
      background-color: red;
    }
    #orange {
      background-color: orange;
    }
  </style>
</head>

<body>
  <div id="main-container">
    <div class="column-div" id="aqua">
      <div class="column-name">
        Part 1
      </div>

      <div class="user">

      </div>

      <div class="user">

      </div>

      <div class="user">

      </div>

    </div>

    <div class="column-div" id="red">
      <div class="column-name">
        Part 2
      </div>
    </div>
    <div class="column-div" id="orange">
      <div class="column-name">
        Part 3
      </div>
    </div>
  </div>

</body>

</html>

jQuery - 如何在可排序的交互中阻止div移动

2 个答案: