Sortable test - drag mock

simulate drag and drop using https://github.com/andywer/drag-mock

by zrpnr

HTML

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://andywer.github.io/drag-mock/drag-mock.min.js"></script>
<div class="container">
  <div class="list half" id="list1">
    <div>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'
  });

});

// andwywer drag-mock
// https://github.com/andywer/drag-mock





// simulate move items
const dragTo = function(item, dest) {
	if (item) {
	  console.log('moving', item, dest);
  	dragMock.dragStart(item).drop(dest);
  }
  else {
  	console.log('no items remain in this list');
  }
}
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
	const dir = button.getAttribute('data-dir')
	button.onclick = () => {
    const list1 = document.querySelector('#list1');
    const list2 = document.querySelector('#list2');
    const list1item = document.querySelector('#list1 > div');
    const list2item = document.querySelector('#list2 > div');

  	switch (dir) {
	    case 'to':
				dragTo(list1item, list2);
      break;
      case 'from':
				dragTo(list2item, list1);
      break;
    }
  }
});