Sortable test - ember sortable

simulate drag and drop using https://github.com/SortableJS/ember-sortablejs/blob/master/addon-test-support/dndsimulator.js

by zrpnr

HTML

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.10.0-rc3/Sortable.js"></script>
<div class="container">
  <div class="list half" id="list1">
    <div draggable="true">Item 1.1</div>
    <div>Item 1.2</div>
    <div>Item 1.3</div>
    <div>Item 1.4</div>
    <div>Item 1.5</div>
  </div>

  <div class="list half" id="list2">
    <div>Item 2.1</div>
    <div>Item 2.2</div>
    <div>Item 2.3</div>
    <div>Item 2.4</div>
    <div>Item 2.5</div>
  </div>
</div>
<div class="container">
  <div class="ui">
    <button data-dir="to">
    Move item from 1 to 2
    </button>
  </div>
  <div class="ui">
    <button data-dir="from">
    Move item from 2 to 1
    </button>
  </div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  background: #fff;
}

.ui {
  padding: 1rem;
}

.list {
  padding: 1rem;
  background: #eee;
  border: 2px dashed #ebc934;
}

.list div {
  background: #666;
  border: 1px solid #999;
  color: #ccc;
  padding: 0.5rem;
}

.list div.ui-state-drop {
  background: #ebc934;
  opacity: .5;
}

JavaScript

const lists = document.querySelectorAll('.list');

lists.forEach(list => {
	
	const sorted = new Sortable(list, {
    ghostClass: 'ui-state-drop',
      group: 'items'
   });

});

// ember-sortablejs
// https://github.com/SortableJS/ember-sortablejs/blob/master/addon-test-support/dndsimulator.js
function getPositionAtCenter(element) {
  const {top, left, width, height} = element.getBoundingClientRect();
  return {
    x: left + width / 2,
    y: top + height / 2
  };
}

function getDistanceBetweenElements(a, b) {
 const aPosition = getPositionAtCenter(a);
 const bPosition = getPositionAtCenter(b);

 return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);
}

function createEvent (eventName, options) {
  let event = {};
  event.cancelable = true;
  event.bubbles = true;

  /* if the clientX and clientY options are specified,
  also calculated the desired screenX and screenY values */
  if(options.x && options.y) {
      event.screenX = window.screenX + options.x;
      event.screenY = window.screenY + options.y;
      event.clientX = options.x;
      event.clientY = options.y;
      delete options.x;
      delete options.y;
  }

  event = Object.assign(event, options)

  switch (true) {
    case eventName.includes('pointer'):
      return new PointerEvent(eventName, event);
    case eventName.includes('mouse'):
      return new MouseEvent(eventName, event)
    case eventName.includes('drag'):
    case eventName.includes('drop'):
      return new DragEvent(eventName, event);
    default:
      return new CustomEvent(eventName, event);
  }
}

/**
 * @public
 * @param {HTMLElement} sourceElement - Element to be dragged
 * @param {HTMLElement} targetElement - Element where source element is being dropped
 * @returns {Promise}
 */
async function simulateDrag (sourceElement, targetElement) {

  /* get the coordinates of both elements, note that
  left refers to X, and top to Y */
  const sourceCoordinates = sourceElement.getBoundingClientRect();
  const...