Question

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

现在，无论Div 1在哪里，Div 2已经加载并且处于可见状态。当您将Div 1移开时，您将看到基础的Div2。我想要的是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>

JS

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

Answer 1

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

请参见下面的代码。

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

除第一个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>

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

1 个答案: