Drag and Drop

drag-and-drop.markdown

Drag and Drop

A Pen by Benjamin Cortes on CodePen.

License.

index.html

<menu class="menu">
  <li class="item" draggable="true">
    <header>A</header>
  </li>
  <li class="item" draggable="true">
    <header>B</header>
  </li>
  <li class="item" draggable="true">
    <header>C</header>
  </li>
  <li class="item" draggable="true">
    <header>D</header>
  </li>
  <li class="item" draggable="true">
    <header>E</header>
  </li>
</menu>

script.babel

const cols = document.querySelectorAll('.item');
let dragSrcElement = null;

/** starts the selection of the drag element and set's configuration */
function handleDragStart(e){
  this.classList.add('selected');
  // set the source element when you start dragging
  dragSrcElement = this;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragOver(e){
  e.preventDefault();
  /** set's the type of drag effect */
  e.dataTransfer.dropEffect = 'move';
}

/** marks the element we are dragging over */
function handleDragEnter(e){
  this.classList.add('over');
}

/** removes mark when we leave element */
function handleDragLeave(e){
  this.classList.remove('over');
};

function handleDrop(e){
  e.stopPropagation();
  /** check to see if this is the same source as what we are dragging around */
  let notSameElement = dragSrcElement != this;
  
  if(notSameElement) {
    /** take the source html and set it to the element we are over */
    dragSrcElement.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }
}
/** 
 * remove the over class for any element that might still have it
 * and removes the selected class from the element you where dragging
*/
function handleDragEnd(e){
  cols.forEach(column => {
    let isOverElement = column.classList.contains('over');
    let isSelected = column.classList.contains('selected');
    
    if(isOverElement){
      column.classList.remove('over');
    }
    if(isSelected){
      column.classList.remove('selected');
    }
  });
}

cols.forEach( column => {
  column.addEventListener('dragstart', handleDragStart, false);
  column.addEventListener('dragover', handleDragOver, false);
  column.addEventListener('dragenter', handleDragEnter, false);
  column.addEventListener('dragleave', handleDragLeave, false);
  column.addEventListener('drop', handleDrop, false);
  column.addEventListener('dragend', handleDragEnd, false);
});

style.scss

[draggable] {
  user-select: none;
  cursor: move;
}

.menu {
  display: flex;
}

.item {
  display:flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  text-align: center;
  list-style: none;
  background-color: #005DE8;
  color: white;
  border: 2px solid white;
  transition: all 250ms ease-out;
}

.item.over {
  border: 2px dashed #FFC82E;
  background-color: #E62899;
}

.item.selected {
  opacity: 0.4;
}

styles

<link href="https://higgs-qa.kaptest.com/main-min.css" rel="stylesheet" />