UI Sortable - 我怎样才能让一些 div 在一个 sortable 中保持完整并且在其他 sortables 改变时永远不会移动或改变

Posted 2023-05-08

【中文标题】UI Sortable - 我怎样才能让一些 div 在一个 sortable 中保持完整并且在其他 sortables 改变时永远不会移动或改变

【英文标题】：UI Sortable - How can i make some divs in a sortable to stay intact and never move or change while other sortables change

【发布时间】：2020-12-14 11:22:55

【问题描述】：

我怎样才能使排序中的一些 div 保持完整并且永远不会移动或更改，而当其他排序对象在选择 jquery 可排序时发生更改。

我有这个：

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-></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-></div>').insertAfter(ui.placeholder);
        );

    ,
    stop: function (e, ui) 

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

    ,
);

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

现在我的布局是这样的：

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

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

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

【参考方案1】：

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

使用connectWith: ".dropzone" 允许您指定您希望能够对哪个区域进行排序。此区域之外的元素将无法移动/排序。

片段 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: 内移动，不包括类名称为grid-footer 的项目。

在下面的 sn-p 中，您将看到 <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>

【参考方案2】：

你会想要使用itemsoption。

指定元素内的哪些项目应该是可排序的。

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