drag-and-drop
Last updated
Last updated
Eg use js library
Or if using veu js
Or use 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.
It be good to figure this out as a component.
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?
Other option is JQuery UI multisortable previous version of autoEdit in node. A bit fiddly to make a selection.
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.
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?
Also review Palestinian remix (trello/slack) D&D by Laurian, example code.
From Laurian:
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
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.
Not actually drag and drop but intermediate data structure implementation.
JSffidle high fidelity mockup example: For simplicity the words are plain text and not wrapped in span tag, as they would be in an proper hyper transcript.
Github repo: JS fiddle example:
In previous version we used jqueryUI.
Abstracted example with jquery multi sortable
Another option is to use sortable
Nice coz it has nested ul/li which would allow to move all sections of paragraphs all togethere.
the drag and drop was made with rangy and tether.js () , basically using tether to replicate the selection and have it html5 draggable
Spec of the EDL sequence.
