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

Question

我想要多个可拖动项目到同一个地方 "come out"。当第一个被拖走时，第二个会加载并可以拖动。当第二个被拖走时，第三个div将加载，依此类推。

现在，Div 2 已经加载并处于可见状态，无论 Div 1 在哪里。当您将 Div 1 移开时，您会看到底层的 Div 2。我想要的是 Div 2 成为 "hidden"。它应该只在 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>

JS

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

Answer 1

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

看下面的代码。

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

除第一个之外的每个 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>

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

How to load next draggable item only after the current item has been moved?

javascript

jquery

jquery-ui-draggable