Изменить перетаскиваемый элемент для drag and drop

Рейтинг: 1Ответов: 0Опубликовано: 19.02.2023

Хочу реализовать перетаскивание элемента из одного 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>

Ответы

Ответов пока нет.