how to: drag and drop

[hpvd]

unpoly looks really exciting :)

just a question:
how would one integrated advanced capabilities like drag and drop in the best way?
I was running into this question when visiting the task demo: https://demo.unpoly.com/tasks
drag and drop would be the perfect usecase to give the shown tasks a new order, e.g. because of their prio

in general this looks like:
https://glitch.com/~simple-drag-drop

and is done this way
https://web.dev/drag-and-drop/

[adam12]

In 2017-2018, I paired Unpoly with Dragula. There wasn't a lot of complexity around it, and it was self-contained inside an Unpoly compiler. Here's the code snippet from that project.

var drak;

up.compiler('[pinnable]', function() {
  if (typeof drak !== "undefined" && typeof drak.destroy === "function") drak.destroy()

  var containers = $('[pinnable]').toArray();

  drak = dragula(containers, {
    copy: false,
    accepts: function(el, target) {
      return target.hasAttribute('pinnable-target');
    }
  });

  drak.on('drop', function(el) {
    var form = el.querySelector('form[name=pin]');

    $(form).trigger('submit');
  });

  return function() {
    drak.destroy();
  };
});

For the case of the snippet above, the project had a kanban-style layout, where one column had pinned items and the other column had an infinite list of them. You'd drag from the infinite list to the "pinned" list. Each "card" had a form that would know how to pin itself, and I'd trigger this once the drop happened.

[hpvd]

many thanks for pointing to dragula and your snippet!!

Looks really interesting. Just for everyone who is also interested in it:

Since the original project is little outdated, there is also a fork with some good progress:

still maintained Issue:
bevacqua/dragula#689

dragula2
https://github.com/toofff/dragula2

Roadmap:
toofff/dragula2#2