UI 可排序 - 我怎样才能使可排序的一些 div 保持完整并且在其他可排序项发生变化时从不移动或更改

Question

我怎样才能让 sortable 中的一些 div 保持完整，并且在其他 sortables 发生变化时从不移动或更改，当它们选择了 jquery sortable 时。

我有这个：

function setupDraggableSectionSwitch() {
$(".slides").sortable({
    cancel: ".nosort",
    placeholder: 'slide-placeholder',
    axis: "y",
    revert: 150,
    start: function (e, ui) {

        placeholderHeight = ui.item.outerHeight();
        ui.placeholder.height(placeholderHeight + 15);
        $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);

    },
    change: function (event, ui) {


        ui.placeholder.stop().height(0).animate({
            height: ui.item.outerHeight() + 15
        }, 300);

        placeholderAnimatorHeight = parseInt($(".slide-placeholder-animator").attr("data-height"));

        $(".slide-placeholder-animator").stop().height(placeholderAnimatorHeight + 15).animate({
            height: 0
        }, 300, function () {
            $(this).remove();
            placeholderHeight = ui.item.outerHeight();
            $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
        });

    },
    stop: function (e, ui) {

        $(".slide-placeholder-animator").remove();

    },
});

$(".slides").disableSelection();

}

现在我的布局是这样的：

-----------------------------
        HEADER
-----------------------------
         DIV1
-----------------------------
         DIV2
-----------------------------
         FOOTER

我是如何排序的，我在上面看到的所有元素上都使用 sortable，但我想要的只是允许 DIV1 和 DIV2 可排序并保持 HEADER 和 FOOTER 完好无损，我该如何实现。

您看到的代码的问题是页眉和页脚仍然可以排序。

Answer 1

既然你使用了标签 jquery-ui 和 jquery-ui-sortable，这是你想要的吗？

使用connectWith: ".dropzone" 允许您指定要排序的区域。此区域外的元素将无法 move/sort.

片段 1

$(".dropzone").sortable({
  connectWith: ".dropzone",
  update: function(event, ui) {},
  placeholder: "dashed"
});

.grid-view {
  width: 50%;
  background-color: #f5f2f2;
  padding: 25px;
}

.grid-users {
  background: #f5f5f5;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 0px;
  padding-left: 0px;
  cursor: move;
  border: #000 1px solid;
  text-align: center;
  font-weight: bold;
}

.grid-header,
.grid-footer {
  background: #34bdeb;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-right: 0px;
  padding-left: 0px;
  border: #000 1px solid;
  text-align: center;
  font-weight: bold;
}

.dashed {
  border: 2px dashed #999;
  background: #ede8e8;
  height: 35px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container ">
  <div class="row justify-content-center align-items-center">
    <div class="grid-view">
      <div id="header-1" class="grid-header">Header</div>
      <div class="dropzone">
        <div id="team-1" class="grid-users">DIV 1</div>
        <div id="team-2" class="grid-users">DIV 2</div>
      </div>
      <div id="header-1" class="grid-footer">Footer</div>
    </div>
  </div>
</div>

您还可以阻止某些元素在 connectWith: 内移动，为此您必须添加 items: ':not(.grid-footer)' 这将允许所有元素在 connectWith: 内移动，但不包括具有class-name grid-footer.

在下面的代码片段中，您会看到 <div>footer</div> 被阻止移动，所有其他 <div> 元素都可以排序。

代码段 2：

$(".dropzone").sortable({
  connectWith: ".dropzone",
  items: ':not(.grid-footer)',
  update: function(event, ui) {},
  placeholder: "dashed"
});

.grid-view {
  width: 50%;
  background-color: #f5f2f2;
  padding: 25px;
}

.grid-users {
  background: #f5f5f5;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 0px;
  padding-left: 0px;
  cursor: move;
  border: #000 1px solid;
  text-align: center;
  font-weight: bold;
}

.grid-header,
.grid-footer {
  background: #34bdeb;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-right: 0px;
  padding-left: 0px;
  border: #000 1px solid;
  text-align: center;
  font-weight: bold;
}

.dashed {
  border: 2px dashed #999;
  background: #ede8e8;
  height: 35px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container ">
  <div class="row justify-content-center align-items-center">
    <div class="grid-view">
      <div class="dropzone">
        <div id="header-1" class="grid-header">Header</div>
        <div id="team-1" class="grid-users">DIV 1</div>
        <div id="team-2" class="grid-users">DIV 2</div>
        <div id="header-1" class="grid-footer">Footer</div>
      </div>
    </div>
  </div>
</div>

Answer 2

您将要使用 items option。

Specifies which items inside the element should be sortable.

function setupDraggableSectionSwitch() {
  $(".slides").sortable({
    items: "> div:not(.nosort)",
    placeholder: 'slide-placeholder',
    axis: "y",
    revert: 150,
    start: function(e, ui) {
      placeholderHeight = ui.item.outerHeight();
      ui.placeholder.height(placeholderHeight + 15);
      $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
    },
    change: function(event, ui) {
      ui.placeholder.stop().height(0).animate({
        height: ui.item.outerHeight() + 15
      }, 300);
      placeholderAnimatorHeight = parseInt($(".slide-placeholder-animator").attr("data-height"));
      $(".slide-placeholder-animator").stop().height(placeholderAnimatorHeight + 15).animate({
        height: 0
      }, 300, function() {
        $(this).remove();
        placeholderHeight = ui.item.outerHeight();
        $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
      });
    },
    stop: function(e, ui) {
      $(".slide-placeholder-animator").remove();
    },
  });

  $(".slides").disableSelection();
}

$(setupDraggableSectionSwitch);

.slides {
  border: 1px solid #CCC;
}

.slides div {
  padding: 20px;
}

.slides .header {
  border-bottom: 1px solid #CCC;
}

.slides .footer {
  border-top: 1px solid #CCC;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div>
  <div class="slides">
    <div class="header nosort">
      HEADER
    </div>
    <div class="sort-item">
      DIV 1
    </div>
    <div class="sort-item">
      DIV 2
    </div>
    <div class="footer nosort">
      FOOTER
    </div>
  </div>
</div>

UI 可排序 - 我怎样才能使可排序的一些 div 保持完整并且在其他可排序项发生变化时从不移动或更改

UI Sortable - How can i make some divs in a sortable to stay intact and never move or change while other sortables change

jquery

jquery-ui

jquery-ui-sortable