Привет, я работаю с перетаскиванием, но я остановился на этой проблеме.
У меня есть 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 -->
Привет, я опубликовал рабочий пример ниже. Я установил каждый атрибут 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>