How to Replace Drag and Drop element in a different section

Question

I've read through several different examples but haven't been able to see what I'm missing.

I want to have a section with draggable elements that will replace elements in a second section. In the second section, I have the elements swapping with each other and not replacing them. Here is what I have so far...

document.addEventListener('DOMContentLoaded', (event) => {

  var dragSrcEl = null;

  function handleDragStart(e) {
    this.style.opacity = '0.4';

    dragSrcEl = this;

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
  }

  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }

    e.dataTransfer.dropEffect = 'move';

    return false;
  }

  function handleDragEnter(e) {
    this.classList.add('over');
  }

  function handleDragLeave(e) {
    this.classList.remove('over');
  }

  function handleDrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation(); // stops the browser from redirecting.
    }

    if (dragSrcEl != this) {
      dragSrcEl.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');
    }

    return false;
  }

  function handleDragEnd(e) {
    this.style.opacity = '1';

    items.forEach(function(item) {
      item.classList.remove('over');
    });
  }


  let items = document.querySelectorAll('.grid-container .box');
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart, false);
    item.addEventListener('dragenter', handleDragEnter, false);
    item.addEventListener('dragover', handleDragOver, false);
    item.addEventListener('dragleave', handleDragLeave, false);
    item.addEventListener('drop', handleDrop, false);
    item.addEventListener('dragend', handleDragEnd, false);
  });

});

body {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#wrap {
  width: 1100px;
  margin: 0 auto;
}

#external-events {
  float: left;
  width: 150px;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
  text-align: left;
}

#external-events h4 {
  font-size: 16px;
  margin-top: 0;
  padding-top: 1em;
}

#external-events-listing {
  width: 140px;
  height: 175px;
  overflow: auto;
}

#external-events .fc-event {
  margin: 10px 0;
  cursor: pointer;
}

#external-events p {
  margin: 1.5em 0;
  font-size: 11px;
  color: #666;
}

#external-events p input {
  margin: 0;
  vertical-align: middle;
}

#calendar {
  float: right;
  width: 900px;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.box {
  border: 2px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

.box.over {
  border: 3px dotted #666;
}

[draggable] {
  user-select: none;
}

<div id='wrap'>
  <div id='external-events'>
    <h4>Draggable List</h4>
    <div id='external-events-listing'>
      <div draggable="true" class='fc-event'>My Event 1</div>
      <div draggable="true" class='fc-event'>My Event 2</div>
      <div draggable="true" class='fc-event'>My Event 3</div>
      <div draggable="true" class='fc-event'>My Event 5</div>
      <div draggable="true" class='fc-event'>My Event 2</div>
      <div draggable="true" class='fc-event'>My Event 3</div>
      <div draggable="true" class='fc-event'>My Event 4</div>
      <div draggable="true" class='fc-event'>My Event 5</div>
    </div>
  </div>
  <h4>Rearranging Section</h4>
  <div class="grid-container">
    <div draggable="true" class="box">1</div>
    <div draggable="true" class="box">2</div>
    <div draggable="true" class="box">3</div>
    <div draggable="true" class="box">4</div>
    <div draggable="true" class="box">5</div>
    <div draggable="true" class="box">6</div>
    <div draggable="true" class="box">7</div>
    <div draggable="true" class="box">1</div>
    <div draggable="true" class="box">2</div>
    <div draggable="true" class="box">3</div>
    <div draggable="true" class="box">4</div>
    <div draggable="true" class="box">5</div>
    <div draggable="true" class="box">6</div>
    <div draggable="true" class="box">7</div>
    <div draggable="true" class="box">1</div>
    <div draggable="true" class="box">2</div>
    <div draggable="true" class="box">3</div>
    <div draggable="true" class="box">4</div>
    <div draggable="true" class="box">5</div>
    <div draggable="true" class="box">6</div>
    <div draggable="true" class="box">7</div>
    <div draggable="true" class="box">1</div>
    <div draggable="true" class="box">2</div>
    <div draggable="true" class="box">3</div>
    <div draggable="true" class="box">4</div>
    <div draggable="true" class="box">5</div>
    <div draggable="true" class="box">6</div>
    <div draggable="true" class="box">7</div>
  </div>
</div>
</div>

The goal is to be able to use elements from the draggable list to replace elements in the rearrange section and not remove/replace the element from the draggable list. Here is a simple view of the current Frankenstein state of what I have: https://codepen.io/mcdesignco/pen/WNoyaPx

What do I need to add to get this functionality?

Answer 1

You need to create same drag events for your div's inside external-events-listing also to have some functionality.

      let items2 = document.querySelectorAll('#external-events-listing div');
      items2.forEach(function(item2) {
        item2.addEventListener('dragstart', handleDragStart, false);
...

And if you want to make sure that events stays in the place check if drag element has class fc-event and make additional logic on drop where you will leave out dragSrcEl.innerHTML = this.innerHTML;, swapping part.

  function handleDrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation(); // stops the browser from redirecting.
    }

    if (dragSrcEl != this) {
      if (dragSrcEl.className !== "fc-event") {
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
      } else {
        this.innerHTML = e.dataTransfer.getData('text/html');
      }
    }

    return false;
  }

document.addEventListener('DOMContentLoaded', (event) => {

  var dragSrcEl = null;

  function handleDragStart(e) {
    this.style.opacity = '0.4';

    dragSrcEl = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
  }

  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }

    e.dataTransfer.dropEffect = 'move';

    return false;
  }

  function handleDragEnter(e) {
    this.classList.add('over');
  }

  function handleDragLeave(e) {
    this.classList.remove('over');
  }

  function handleDrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation(); // stops the browser from redirecting.
    }

    if (dragSrcEl != this) {
      if (dragSrcEl.className !== "fc-event") {
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
      } else {
        this.innerHTML = e.dataTransfer.getData('text/html');
      }
    }

    return false;
  }

  function handleDragEnd(e) {
    this.style.opacity = '1';

    items.forEach(function(item) {
      item.classList.remove('over');
    });
  }


  let items = document.querySelectorAll('.grid-container .box');
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart, false);
    item.addEventListener('dragenter', handleDragEnter, false);
    item.addEventListener('dragover', handleDragOver, false);
    item.addEventListener('dragleave', handleDragLeave, false);
    item.addEventListener('drop', handleDrop, false);
    item.addEventListener('dragend', handleDragEnd, false);
  });



  let items2 = document.querySelectorAll('#external-events-listing div');
  items2.forEach(function(item2) {
    item2.addEventListener('dragstart', handleDragStart, false);
    item2.addEventListener('dragenter', handleDragEnter, false);
    item2.addEventListener('dragover', handleDragOver, false);
    item2.addEventListener('dragleave', handleDragLeave, false);
    item2.addEventListener('drop', handleDrop, false);
    item2.addEventListener('dragend', handleDragEnd, false);
  });

});

body {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#wrap {
  width: 1100px;
  margin: 0 auto;
}

#external-events {
  float: left;
  width: 150px;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
  text-align: left;
}

#external-events h4 {
  font-size: 16px;
  margin-top: 0;
  padding-top: 1em;
}

#external-events-listing {
  width: 140px;
  height: 175px;
  overflow: auto;
}

#external-events .fc-event {
  margin: 10px 0;
  cursor: pointer;
}

#external-events p {
  margin: 1.5em 0;
  font-size: 11px;
  color: #666;
}

#external-events p input {
  margin: 0;
  vertical-align: middle;
}

#calendar {
  float: right;
  width: 900px;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.box {
  border: 2px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

.box.over {
  border: 3px dotted #666;
}

[draggable] {
  user-select: none;
}

<div id='wrap'>
  <div id='external-events'>
    <h4>Draggable List</h4>
    <div id='external-events-listing'>
      <div draggable="true" class='fc-event'>My Event 1</div>
      <div draggable="true" class='fc-event'>My Event 2</div>
      <div draggable="true" class='fc-event'>My Event 3</div>
      <div draggable="true" class='fc-event'>My Event 5</div>
      <div draggable="true" class='fc-event'>My Event 2</div>
      <div draggable="true" class='fc-event'>My Event 3</div>
      <div draggable="true" class='fc-event'>My Event 4</div>
      <div draggable="true" class='fc-event'>My Event 5</div>
    </div>
  </div>
  <h4>Rearranging Section</h4>
  <div class="grid-container">
    <div draggable="true" class="box">1</div>
    <div draggable="true" class="box">2</div>
    <div draggable="true" class="box">3</div>
    <div draggable="true" class="box">4</div>
    <div draggable="true" class="box">5</div>
    <div draggable="true" class="box">6</div>
    <div draggable="true" class="box">7</div>
    <div draggable="true" class="box">1</div>
    <div draggable="true" class="box">2</div>
    <div draggable="true" class="box">3</div>
    <div draggable="true" class="box">4</div>
    <div draggable="true" class="box">5</div>
    <div draggable="true" class="box">6</div>
    <div draggable="true" class="box">7</div>
    <div draggable="true" class="box">1</div>
    <div draggable="true" class="box">2</div>
    <div draggable="true" class="box">3</div>
    <div draggable="true" class="box">4</div>
    <div draggable="true" class="box">5</div>
    <div draggable="true" class="box">6</div>
    <div draggable="true" class="box">7</div>
    <div draggable="true" class="box">1</div>
    <div draggable="true" class="box">2</div>
    <div draggable="true" class="box">3</div>
    <div draggable="true" class="box">4</div>
    <div draggable="true" class="box">5</div>
    <div draggable="true" class="box">6</div>
    <div draggable="true" class="box">7</div>
  </div>
</div>
</div>