Изменить перетаскиваемый элемент для drag and drop
Хочу реализовать перетаскивание элемента из одного div в другой (.var_t6 в ans_t6, к примеру).
Нужно, чтобы это выглядело будто перетаскивается сам элемент, а не его копия-призрак. Для этого, как я понял нужно скрыть оригинальный элемент и либо поменять opasity копии-призрака, либо заменить изображение копии-призрака на изображение элемента.
Подскажите, как это можно сделать?
Если способы, которые я описал невозможно реализовать, то помогите придумать решение, пожалуйста!
document.querySelectorAll('.var_t6').forEach(b => b.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('id', e.currentTarget.id);
e.currentTarget.closest('div.var_t6_container').style.border = '5px solid rgba(0, 0, 0, 0.2)';
}));
document.querySelectorAll('.ans_t6').forEach(b => b.addEventListener('dragover', function(e) {
e.preventDefault();
}));
document.querySelectorAll('.var_t6_container').forEach(b => b.addEventListener('dragover', function(e) {
e.preventDefault();
}));
document.querySelectorAll('.var_t6_container').forEach(b => b.addEventListener('drop', function(e) {
let itemId = e.dataTransfer.getData('id');
console.log(e.currentTarget)
e.currentTarget.append(document.getElementById(itemId));
e.currentTarget.querySelector('.var_t6').style.border = 'none';
e.currentTarget.style.border = 'none';
}));
document.querySelectorAll('.ans_t6').forEach(b => b.addEventListener('drop', function(e) {
let itemId = e.dataTransfer.getData('id');
e.currentTarget.append(document.getElementById(itemId));
document.getElementById(itemId).style.position = 'initial';
.varandans_container {
height: 1008px;
margin-top: 120px;
}
.var_container {
width: 553px;
height: 1000px;
display: inline-block;
margin-top: 4px;
position: relative;
}
.var_t6_container {
width: 553px;
height: 100px;
border-radius: 20px;
}
.ans_container {
float: right;
width: 561px;
height: 1000px;
display: inline-block;
}
.var_t6,
.ans_t6 {
border-radius: 20px;
}
.var_t6 {
background-color: #F5A25D;
display: flex;
justify-content: center;
width: 553px;
height: 100px;
left: 0;
border-radius: 15px;
transition: border 0.4s ease;
}
.ans_t6 {
border: 4px solid rgba(56, 147, 147, 0.6);
width: 561px;
height: 108px;
}
.var_t6_text {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 45px;
line-height: 100px;
color: #000000;
}
.var_t6_container:not(:first-child) {
margin-top: 80px;
}
.ans_t
<div class="varandans_container">
<div class="var_container">
<div class="var_t6_container">
<div class="var_t6" id="var_t6_1" draggable="true"><span class="var_t6_text">войсковой старшина</span></div>
</div>
<div class="var_t6_container">
<div class="var_t6" id="var_t6_2" draggable="true"><span class="var_t6_text">сотник</span></div>
</div>
<div class="var_t6_container">
<div class="var_t6" id="var_t6_3" draggable="true"><span class="var_t6_text">хорунжий</span></div>
</div>
<div class="var_t6_container">
<div class="var_t6" id="var_t6_4" draggable="true"><span class="var_t6_text">подъесаул</span></div>
</div>
<div class="var_t6_container">
<div class="var_t6" id="var_t6_5" draggable="true"><span class="var_t6_text">есаул</span></div>
</div>
<div class="var_t6_container">
<div class="var_t6" id="var_t6_6" draggable="true"><span class="var_t6_text">казак</span></div>
</div>
</div>
<div class="ans_container">
<div class="ans_t6" id="ans_t6_1"></div>
<div class="ans_t6" id="ans_t6_2"></div>
<div class="ans_t6" id="ans_t6_3"></div>
<div class="ans_t6" id="ans_t6_4"></div>
<div class="ans_t6" id="ans_t6_5"></div>
<div class="ans_t6" id="ans_t6_6"></div>
</div>
<div>
Источник: Stack Overflow на русском