drag-and-drop

Component/part description

Implementations Options considered

sortable

Eg use js library https://github.com/RubaXa/Sortable

vuejs

Or if using veu js https://github.com/SortableJS/Vue.Draggable

dragula

Or use https://github.com/bevacqua/dragula js To figure out in dragula is how to integrate with selections. Eg make a selection draggable. Coz I think dragula needs draggable items to be wrapped in a div with a certail class (?)

Could wrap selection/annotations/tags in a div with that class to make this possible.

in autoEdit Comes from a problem is of representation of highlight for drag and drop. Hilight is a class added to a word.

https://github.com/OpenNewsLabs/autoEdit_2/blob/paperedit/lib/app/views/transcription_view.js#L34

It be good to figure this out as a component.

JSffidle high fidelity mockup example: https://jsfiddle.net/pietrops/Lufaerr2/1/ For simplicity the words are plain text and not wrapped in span tag, as they would be in an proper hyper transcript.

Paperedit - dragula - JSFiddle - Code Playground

This makes the whole line / paragraph draggable.

Making words as draggable and having multi selection is outside of the scope of dragula (read that in the issues section of github repo).

Adding sortable with dragula gives this error TypeError: Cannot read property 'pointerEnabled' of undefined There might be a problem with dragula and browserify?

Option: Jquery UI multisortable

Other option is JQuery UI multisortable previous version of autoEdit in node. A bit fiddly to make a selection.

Github repo: https://github.com/shvetsgroup/jquery.multisortable JS fiddle example: https://jsfiddle.net/neochief/KWeMM/

In previous version we used jqueryUI. https://github.com/pietrop/autoEdit_nwjs_alpha_RandD

see vide demo of previous version

using express, jquery multisortable for D&D, bbc video compositor for preview. issues:

lack of data structure for selection to -> papercut->to paperedit made it hard to add text in a reliable way.
jquery ui multisortable selection not natural, click then shift + click to select range of text.

https://github.com/pietrop/autoEdit_nwjs_alpha_RandD/blob/master/views/template/paperedit.html

Abstracted example with jquery multi sortable https://jsfiddle.net/pietrops/eo4najce/

Main issue with this is that you need to click to select. And do click shift to select from one word to the other.

An option could be to add slected class to words span contigues to clicked selected?

Option: Sortable

Another option is to use sortable https://rubaxa.github.io/Sortable/

Jquery Sortable

https://johnny.github.io/jquery-sortable/ Nice coz it has nested ul/li which would allow to move all sections of paragraphs all togethere.

Palestinian remix / hyperaudio - Laurian

Also review Palestinian remix (trello/slack) D&D by Laurian, example code.

https://github.com/hyperaudio/hyperaudio-experimental

From Laurian:

the drag and drop was made with rangy and tether.js (http://tether.io/) , basically using tether to replicate the selection and have it html5 draggable

http://popcorn.gridinoc.com/popcorn.gridinoc.com

listener + data layer // Andrea's option <-- current implemtation

Listener on user text selection on transcription Grab info Create div Add and div to the paperedit side at the end.

Div on paper-edit side can then be sortable.

DataLayer

Spec of the EDL sequence. http://www.autoedit.io/jsdoc_docs/module-edl_composer.html

https://github.com/andrixb/texthighliter

Edit fiddle - JSFiddle - Code Playground

http://farhadi.ir/projects/html5sortable/

https://www.html5rocks.com/en/tutorials/dnd/basics/

https://github.com/andrixb/v-textselector

Not using drag and drop. But using data layer. User selects words in transcriptions. Data structure is created with those info. Papercut ejd template is populated And is added at the end of paper edit With mouse down listener

With html5 drag and drop added sortable To allow to be able to rearrange order of papercuts. Can drag a piece and then copy and append after element you drop on. And remove original piece.

Subsequent improvement If click on papercut then can add selection after that one rather then at the end. Todo: find away to signal that in CSS.