Как загрузить следующий перетаскиваемый элемент только после перемещения текущего элемента? - PullRequest
Новая
       10

Как загрузить следующий перетаскиваемый элемент только после перемещения текущего элемента?

0 голосов
/ 23 ноября 2018

Я хочу, чтобы несколько перетаскиваемых предметов «выходили» из одного места.Когда первый перетаскивается, второй загружается и становится доступным для перетаскивания.Когда второй перетаскивается, загружается третий div и т. Д.

В настоящий момент Div 2 уже загружен и находится в видимом состоянии независимо от того, где находится Div 1.Когда вы отодвинете Div 1, вы увидите основной Div 2. То, что я хочу, чтобы Div 2 был «скрыт».Он должен загружаться и становиться видимым только при удалении Div 1.

Спасибо за вашу помощь.

Что я пробовал.

https://jsfiddle.net/0wg8sqmz/

<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"
    });
});

1 Ответ

0 голосов
/ 23 ноября 2018

Вы можете сделать это довольно легко, используя атрибуты данных.

См. Приведенный ниже код.

Каждый 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>
...