Sortable test - dnd simulator

simulate drag and drop using https://github.com/Photonios/JS-DragAndDrop-Simulator

by zrpnr

HTML

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.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'
  });

});

// photonios simulate dragdrop
// https://github.com/Photonios/JS-DragAndDrop-Simulator/blob/master/dndsim.js
/*
 * The MIT License (MIT)
 *
 * Copyright (c) 2016 Swen Kooij / Photonios
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
 * of the Software, and to permit persons to whom the Software is furnished to do
 * so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

/*!
 * \class DndSimulatorDataTransfer
 *
 * \brief Re-implementation of the native \see DataTransfer object.
 *
 * \param data Optional: The data to initialize the data transfer object with.
 *
 * \see https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
 */
var DndSimulatorDataTransfer = function() {
    this.data = {};
};

/*!
 * \brief Controls the feedback currently given to the user.
 *
 * Must be any of the following strings:
 *
 * - "move"
 * - "copy"
 * - "link"
 * - "none"
 *
 * The default is "move".
 *
 * \see...