Sortable test - dnd helper

simulate drag and drop

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'
  });

});

// druska simulate dragdrop
// https://gist.github.com/druska/624501b7209a74040175#file-native_js_drag_and_drop_helper-js
function simulateDragDrop(sourceNode, destinationNode) {
    var EVENT_TYPES = {
        DRAG_END: 'dragend',
        DRAG_START: 'dragstart',
        DROP: 'drop'
    }

    function createCustomEvent(type) {
        var event = new CustomEvent("CustomEvent")
        event.initCustomEvent(type, true, true, null)
        event.dataTransfer = {
            data: {
            },
            setData: function(type, val) {
                this.data[type] = val
            },
            getData: function(type) {
                return this.data[type]
            }
        }
        return event
    }

    function dispatchEvent(node, type, event) {
    		console.log({ node, type, event });
        if (node.dispatchEvent) {
            return node.dispatchEvent(event)
        }
        if (node.fireEvent) {
            return node.fireEvent("on" + type, event)
        }
    }

    var event = createCustomEvent(EVENT_TYPES.DRAG_START)
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)

    var dropEvent = createCustomEvent(EVENT_TYPES.DROP)
    dropEvent.dataTransfer = event.dataTransfer
    dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)

    var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)
    dragEndEvent.dataTransfer = event.dataTransfer
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
}


// simulate move items
const dragTo = function(item, dest) {
	if (item) {
	  console.log('moving', item, dest);
  	simulateDragDrop(item, dest);
  }
  else {
  	console.log('no items remain in this list');
  }
}
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
	const dir =...