Перетащите невыбранный div в пределах jquery по выбору - PullRequest
Новая
       11

Перетащите невыбранный div в пределах jquery по выбору

0 голосов
/ 25 марта 2020

Я пытаюсь сделать jquery выбираемым, который делает некоторые элементы выбираемыми с помощью фильтра, но также есть некоторые другие элементы с другим классом, доступные для перетаскивания (но я не пытаюсь сделать те же элементы, выбираемые и перетаскиваемые).

Вот базовый пример c: цель состоит в том, чтобы иметь возможность перетаскивать первый 'x' (который является div с классом .boundary) во второй ' x 'и получите некоторую обратную связь, в то время как div A, B, C (с классом .tok) обычно выбираются. Эти две вещи не должны взаимодействовать друг с другом: AB и C должны быть выбраны, и каждый 'x' должен быть перетаскиваемым.

enter image description here

Мне не нужно, чтобы элементы 'x' были полностью мобильными или даже вообще меняли положение, просто чтобы перетащить из одного в другое, может быть, я вижу, что каждый x, который я пропускаю, каким-то образом выделен, и получает информацию о том, в какой x был перетащен, когда я опускаю. 

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

.tok {
  display: inline-block;
  margin: 1px
}

.boundary {
  display: inline-block;
}
<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>

<script>
  $(function() {
    $("#selectable").selectable({
      filter: '.tok'
    });
  });

  // Option 1: with jquery draggable
  $(".boundary").draggable();

  // Option 2: bind dragstart etc.
  $(document).ready(function() {
    $('.boundary').on("dragstart", function(event) {
      alert('drag started');
    });
    $('.boundary').on("dragenter dragover drop", function(event) {
      event.preventDefault();
      alert(event.type);
    });
  })
</script>

<div id="selectable">
  <div id="t1" class="tok">A</div>
  <div id="b1" class="boundary">x</div>
  <div id="t2" class="tok">B</div>
  <div id="b2" class="boundary">x</div>
  <div id="t3" class="tok">C</div>
</div>

1 Ответ

0 голосов
/ 26 марта 2020

Я оставляю ответ, а не удаляю вопрос, на тот случай, если кто-то совершит аналогичную ошибку: .draggable () должен вызываться после того, как соответствующие элементы существуют, поэтому поместите его в $ (document) .ready или необходимо, чтобы соответствующая часть HTML уже была сериализована, необходима.

Фрагмент кода в этом вопросе демонстрирует возможность выбора, содержащую невыбираемые элементы, которые можно перетаскивать - этот пример может быть полезен другим, поскольку я не смог легко найди такой пример.

...