hyperapp

hello world (hyperx)

HTML

<div id="app"></div>

CSS

.drop_source {
  /* if you want to hide the
  item being dragged */
  /* display: none; */
}
.drop_target {
  border-top: 1px solid red;
}

ul {
  padding-bottom: 20px;
}

ul.drop_last li:last-child {
  border-bottom: 1px solid red;
}

JavaScript

import { h, text, app } from "https://unpkg.com/hyperapp";

function createDragStart(src_id) {
    return function(state, event) {
        return {...state, drop_source: src_id};
    }
}

function createDragOver(dst_id) {
    return function(state, event) {
        event.preventDefault();
        event.stopPropagation();
        return {...state, drop_target: dst_id};
    }
}

function createDrop(dst_id) {
    return function(state, event) {
        event.preventDefault();
        event.stopPropagation();
        let src_id = state.drop_source;
        console.log("Dropping", src_id, "onto", dst_id);
        // find the dragged item by ID number, remove it from the list
        let src_ob = state.queue.find(x => x.id == src_id);
        let new_queue = state.queue.filter(x => x.id != src_id);
        // insert the dragged item above the drop target
        if (dst_id == 'last') {
        		new_queue.push(src_ob);
        } else {
        		let dst_pos = new_queue.findIndex(x => x.id == dst_id);
        		new_queue.splice(dst_pos, 0, src_ob);
        }
        return {
          ...state,
          queue: new_queue,
          drop_source: null,
          drop_target: null,
        };
    }
}

function DragExit (state, event) {
		return {
    		...state,
        drop_target: null
    }
}

app({
  init: {
    queue: [
        {id: 1, title: "Example Code", artist: "The FooBars"},
        {id: 2, title: "Cake Song", artist: "NomNom"},
        {id: 3, title: "I Am Best Cat", artist: "Ciri"},
    ],
    drop_source: null,
    drop_target: null,
  },
  view: state => h('ul', {
  	class: {drop_last: state.drop_target === 'last'},
    ondragover: createDragOver('last'),
    ondragleave: DragExit,
    ondrop: createDrop('last')
   }, state.queue.map(
    item => h(
      'li',
      {
        class: {
          "drop_source": state.drop_source == item.id,
          "drop_target": state.drop_target == item.id,
        },
        draggable: true,
        ondragstart:...