Перетащите 2 поля

ProgramBox

Перетащите 2 поля

Post author:admin
Запись опубликована:9 апреля, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

У меня есть синее и красное поле. Я хотел бы перетащить их, чтобы их можно было переключать. На данный момент я могу перетащить левое поле и поместить его в правое поле. Это работает нормально, но я не могу перетащить правое поле и поместить его в левое поле.

 // Drag and the drop the items
const elements = document.querySelectorAll('#title-drag, #storename-drag');

for (let element of elements) {
  // Allow the drop 
  element.addEventListener("dragover", function(event) {
    event.preventDefault();
  }, false);

  element.addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("text", event.target.id);
  }, false);

  element.addEventListener('drop', function(event) {
    let data = event.dataTransfer.getData("text");
    console.log(event.target.className);
    event.preventDefault();
    element.appendChild(document.getElementById(data));
  });
}

 #title {
  background: red;
}
#storename {
  background: blue;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <!-- Title -->
  <div class="row">
    <div id="title-drag">
      <div class="col-md-3" draggable="true" id="title">
        <div class="mg-item-inner">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Gibt den Seitentitel aus'>
              <span class="name">TITLE</span><i class="fas fa-arrows-alt"></i></button>
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title="Linie Erweitern / Reduzieren">
              <i class="fas fa-swatchbook"></i></button>
          </div><!-- /btn-group -->
          <div class="input-group" role="group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
              <ul class="dropdown-menu">
                <li><a href="#">prefix</a></li>
                <li><a href="#">suffix</a></li>
                <li><a href="#">none</a></li>
              </ul>
            </div><!-- /input-btn-group -->
            <input type="text" class="form-control">
          </div><!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
        </div><!-- /mg-item-inner -->
      </div><!-- /mg-item -->
    </div>

    <!--STORE NANE  -->
    <div id="storename-drag">
      <div class="col-md-3" draggable="true" id="storename">
        <div class="mg-item-inner">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Fügt den Storename hinzu'>
              <span class="name">STORENAME</span><i class="fas fa-arrows-alt"></i></button>
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Linie Erweitern / Reduzieren">
              <i class="fas fa-swatchbook"></i></button>
          </div><!-- /btn-group -->
          <div class="input-group" role="group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
              <ul class="dropdown-menu">
                <li><a href="#">prefix</a></li>
                <li><a href="#">suffix</a></li>
                <li><a href="#">none</a></li>
              </ul>
            </div><!-- /input-btn-group -->
            <input type="text" class="form-control">
          </div><!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
        </div><!-- /mg-item-inner -->
      </div><!-- /mg-item -->
    </div>
  </div>
</div>

https://jsfiddle.net/Lb8e0pz3/

Почему я могу удалить левое поле, но не правое?

1. Я думаю, это потому, что вы добавляете его к своему первому элементу. let data = event.dataTransfer.getData("text"); element.appendChild(document.getElementById(data)); Попробуйте добавить его либо к вашему родительскому элементу, либо вычислить индекс элемента, прежде чем вы захотите добавить его туда.

2. @nabais спасибо за эту информацию! Вероятно, это не сам родительский элемент, поскольку он также может быть родительским родительским элементом, и это должно быть либо #title-drag , либо #storename-drag . Есть идеи о том, как я мог бы создать это утверждение?

Ответ №1:

Это просто потому, что вы делаете

 element.appendChild(document.getElementById(data));

которые всегда добавляют элемент в качестве последних дочерних элементов… Таким образом, перемещаемый элемент всегда будет последним — вот почему, если вы переместите второй элемент, он все равно будет отображаться как второй. С точки зрения чистого кода все работает.

Ответ №2:

вы могли бы увидеть, является ли цель первым элементом родительского элемента, и если да, добавьте:

 if (isFirstElement(event.target)) {   // implement function
  element.parentNode.prepend(document.getElementById(data '-drag'));
} else {
  element.parentNode.appendChild(document.getElementById(data '-drag'));
}