Перетащите несколько DIV как уникальный

Question

Перетащите несколько DIV как уникальный

1

Привет, я работаю с перетаскиванием, но я остановился на этой проблеме.

У меня есть 2 столбца, и я хочу перетащить divs из исходного в целевой столбец. Проблема заключается в том, что эти исходные divs повторяются в каждом исходном контейнере, и мне нужно, чтобы при перемещении (например, div # 36406) все остальные делились в соседних контейнерах-источниках с тем же идентификатором, что и исходный столбец.

изменить 1:

 function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.className);
        }

        function drop(ev) {
        	debugger;
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }

<div style="height:50px; width:50px; border: 1px solid blue; margin-left:40%" ondrop="drop(event)" ondragover="allowDrop(event)"> DROP HERE'</div>   <!-- Target -->


<div class="btn btn-warning '+parcelas[j].idlancamento+'" draggable="true" style="cursor:move" ondragstart="drag(event)">
SOURCE
</div> <!-- source -->

ikk1 22 июнь 2017, в 21:10

Источник

2

Не могли бы вы опубликовать свой текущий код JS? Мы могли бы дать более конкретный ответ таким образом. Я думаю, что общая идея состояла бы в том, чтобы добавить идентификатор к каждому классу div, а затем скрыть все остальные div (непрозрачность: 0, display: none и т. Д.) С тем же классом при запуске события dragstart.
J. Chen 22 июнь 2017, в 18:47
0

Спасибо за ответ @ J.Chen. Я отредактировал свой пост с кодом. Можете ли вы объяснить более правильно, как я могу скрыть другие динамически с ID?
ikk1 22 июнь 2017, в 18:58
1

Идентификаторы элементов должны быть уникальными. Если у вас есть элементы div с одинаковым атрибутом id вам нужно это исправить, прежде чем вы сможете решить свою проблему.
gforce301 22 июнь 2017, в 19:24

Показать ещё 1 комментарий

Теги:

javascript

html5

1 ответ

Ещё вопросы

Не могли бы вы опубликовать свой текущий код JS? Мы могли бы дать более конкретный ответ таким образом. Я думаю, что общая идея состояла бы в том, чтобы добавить идентификатор к каждому классу div, а затем скрыть все остальные div (непрозрачность: 0, display: none и т. Д.) С тем же классом при запуске события dragstart.
Спасибо за ответ @ J.Chen. Я отредактировал свой пост с кодом. Можете ли вы объяснить более правильно, как я могу скрыть другие динамически с ID?
Идентификаторы элементов должны быть уникальными. Если у вас есть элементы div с одинаковым атрибутом id вам нужно это исправить, прежде чем вы сможете решить свою проблему.

J. Chen · Accepted Answer · 2017-06-22T18-59-00.000Z

Привет, я опубликовал рабочий пример ниже. Я установил каждый атрибут data-id div для своего идентификационного номера. Я использовал jQuery в этом примере (надеюсь, что все в порядке). Когда начинается событие перетаскивания, dragStart() функция dragStart(), и она ищет каждый div, у которого есть соответствующий атрибут data-id и устанавливает непрозрачность на 0. Функция dragStop() устанавливает непрозрачность обратно в 1. Дайте мне знать если у вас есть дополнительные вопросы :)

 function dragStart(ev) {
	let id = ev.target.getAttribute("data-id");
  $("[data-id=" + id + "]").not(ev.target).css("opacity", 0);
 }
 
 function dragStop(ev) {
 	let id = ev.target.getAttribute("data-id");
  $("[data-id=" + id + "]").not(ev.target).css("opacity", 1);
 }

function drop(ev) {
  debugger;
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

.btn {
  background-color: red;
  border: 1px solid black;
  width: 90px;
  height: 40px;
  margin: 10px;
}

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

<div class="btn btn-warning '+parcelas[j].idlancamento+'" data-id="123" draggable="true" style="cursor:move" ondragstart="dragStart(event)" ondragend="dragStop(event)">
ID: 123
</div>

<div class="btn btn-warning '+parcelas[j].idlancamento+'" data-id="123" draggable="true" style="cursor:move" ondragstart="dragStart(event)" ondragend="dragStop(event)">
ID: 123
</div>

<div class="btn btn-warning '+parcelas[j].idlancamento+'" data-id="123" draggable="true" style="cursor:move" ondragstart="dragStart(event)" ondragend="dragStop(event)">
ID: 123
</div>

<div class="btn btn-warning '+parcelas[j].idlancamento+'" data-id="000" draggable="true" style="cursor:move" ondragstart="dragStart(event)" ondragend="dragStop(event)">
ID: 000
</div>

Этот код дал мне правильное направление для моей проблемы @J. Чен.