Drag and Drop API fun

Testing drag and drop API with the targets behaving in non-traditional ways.

by Travis Almand

HTML

<div id="panel">
  <button id="basic_btn">basic</button>
  <button id="copy_btn">copy</button>
  <button id="slide_btn">slide</button>
  <button id="rotate_btn">rotate</button>
  <button id="file_btn">file</button>
</div>

<div id="basic_example" class="example hide">
  <div id="basic_top" class="box">
    <div id="basic_drag" class="drag" draggable="true"></div>
  </div>
  <div id="basic_bottom" class="box"></div>
</div>

<div id="copy_example" class="example hide">
  <div id="copy_top" class="box">
    <div id="copy_drag" class="drag" draggable="true"></div>
  </div>
  <div id="copy_bottom" class="box"></div>
</div>

<div id="slide_example" class="example hide">
  <div id="slide_top" class="box">
    <div id="slide_drag" class="drag" draggable="true"></div>
  </div>
  <div id="slide_bottom" class="box"></div>
</div>

<div id="rotate_example" class="example hide">
  <div id="rotate_top" class="box">
    <div id="rotate_drag" class="drag" draggable="true"></div>
  </div>
  <div id="rotate_bottom" class="box"></div>
</div>

<div id="file_example" class="example hide">
  <p>drop an image/svg file</p>
  <div id="file_top" class="box"></div>
  
  <p>drop an svg file</p>
  <div id="file_bottom" class="box"></div>
</div>

CSS

#panel {
  margin-bottom: 20px;
}

.drag {
  background: gainsboro;
  height: 100px;
  width: 100px;
}

.box {
  border: 1px solid black;
  height: 100px;
  margin-bottom: 30px;
  padding: 10px;
  width: 100px;
}

#slide_bottom {
  animation: 2s linear 0s infinite alternate slide;
  left: 0;
  position: relative;
}
@keyframes slide {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

#rotate_bottom {
  animation: 4s linear 0s infinite alternate rotate;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.drop {
  border: 1px solid red !important;
}
.hide {
  display: none;
}

JavaScript

// panel
var $examples = document.querySelectorAll('.example');
var $basicBtn = document.querySelector('#basic_btn');
var $copyBtn = document.querySelector('#copy_btn');
var $slideBtn = document.querySelector('#slide_btn');
var $rotateBtn = document.querySelector('#rotate_btn');
var $fileBtn = document.querySelector('#file_btn');

function hideExamples() {
	$examples.forEach(function (element, index) {
  		element.classList.add('hide')
  });
}
$basicBtn.addEventListener('click', function (e) {
	hideExamples();
  document.querySelector('#basic_example').classList.remove('hide');
});
$copyBtn.addEventListener('click', function (e) {
	hideExamples();
  document.querySelector('#copy_example').classList.remove('hide');
});
$slideBtn.addEventListener('click', function (e) {
	hideExamples();
  document.querySelector('#slide_example').classList.remove('hide');
});
$rotateBtn.addEventListener('click', function (e) {
	hideExamples();
  document.querySelector('#rotate_example').classList.remove('hide');
});
$fileBtn.addEventListener('click', function (e) {
	hideExamples();
  document.querySelector('#file_example').classList.remove('hide');
});

// basic example
var $basicDrag = document.querySelector('#basic_drag');
var $basicTop = document.querySelector('#basic_top');
var $basicBottom = document.querySelector('#basic_bottom');

$basicDrag.addEventListener('dragstart', dragStart);
$basicTop.addEventListener('dragover', dragOver);
$basicTop.addEventListener('drop', drop);
$basicTop.addEventListener('dragexit', dragExit);
$basicBottom.addEventListener('dragover', dragOver);
$basicBottom.addEventListener('drop', drop);
$basicBottom.addEventListener('dragexit', dragExit);

// copy example
var $copyDrag = document.querySelector('#copy_drag');
var $copyTop = document.querySelector('#copy_top');
var $copyBottom = document.querySelector('#copy_bottom');

$copyDrag.addEventListener('dragstart', dragStart);
$copyTop.addEventListener('dragover',...