如何仅在移动当前项目后加载下一个可拖动项目？

debugcn 发表于 Dev

约书亚

我希望多个可拖动项目从同一个地方“出来”。当第一个被拖走时，第二个将加载并可供拖动。当第二个被拖走时，第三个 div 将加载，依此类推。

现在，无论 Div 1 在哪里，Div 2 都已经加载并处于可见状态。当您将 Div 1 移开时，您将看到底层 Div 2。我想要的是 Div 2 被“隐藏”。它应该只在 Div 1 被拖走时加载并变得可见。

谢谢你的帮助。

我试过的。

<div id="drag1" class="drag" style="left:10px;top:20px;background-color:orange">Draggable 1</div>
<div id="drag2" class="drag" style="left:10px;top:-90px;background-color:lightblue">Draggable 2</div>

$(function () {
    $(".drag").draggable({            
        stack: ".drag"
    });
});

颠倒先生

您可以通过使用数据属性轻松地做到这一点。

请参阅下面的代码。

每个 DIV 都有一个data-index属性（例如data-index="1"），当一个元素被拖动（拖动停止）时，它将显示具有下一个索引的元素let next = $(this).data('index') + 1;。

除了第一个 DIV 之外的每个 DIV 都设置为display: none首先隐藏它们。

$(function() {
  $(".drag").draggable({
    stack: ".drag",
    stop: function() {
      
      // Calculate next index
      let next = $(this).data('index') + 1;
      
      // Show next DIV based on data-index
      $('div[data-index="' + next + '"]').show();
    }
  });
});

.drag {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  border-radius: 10px;
  text-align: center;
  background-color: lightpink;
  position: absolute;
}

<link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>

<!-- HTML -->
<div id="drag1" data-index="1" class="drag" style="left:10px;top:20px;background-color:orange">Draggable 1</div>

<div id="drag2" data-index="2" class="drag" style="left:10px;top:20px;background-color:lightblue; display: none;">Draggable 2</div>

<div id="drag3" data-index="3" class="drag" style="left:10px;top:20px;background-color:lightblue; display: none;">Draggable 3</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。