jquery.multisortable - Working

jQuery UI Sortable + Multiselect Working version dragging from transcript list to paper edit list.

by Pietro Passarelli

HTML

<script src="https://rawgithub.com/shvetsgroup/jquery.multisortable/master/src/jquery.multisortable.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.min.js"></script>
<script src="https://cdn.rawgit.com/dbushell/Nestable/master/jquery.nestable.js"></script>
<h1>autoEdit - Test</h1>

<!-- Transcription -->

<h2>Transcription</h2>
Search:
<input type="text" id="search-criteria">Ĺ“
<ul id="transcription1" class="sortable">
    <li transcriptionId="1" class="question">Question1</li>
    <li transcriptionId="1" tcin="01" tcout="02" class="child">T1Item1</li>
    <li transcriptionId="1" tcin="03" tcout="04" class="child">T1Item2</li>
    <li transcriptionId="1" tcin="05" tcout="06" class="child">T1Item3</li>
    <li transcriptionId="1" class="question">Question2</li>
    <li transcriptionId="1" class="child">T1Item4</li>
    <li transcriptionId="1" class="child">T1Item5</li>
    <li transcriptionId="1" class="child">T1Item6</li>
    <li transcriptionId="1" class="question">Question3</li>
    <li transcriptionId="1" class="child">T1Item7</li>
    <li transcriptionId="1" class="child">T1Item8</li>
</ul>
 <h2>Transcription2</h2>

<ul id="transcription2" class="sortable">
    <li transcriptionId="2" class="question">Question1</li>
    <li transcriptionId="2" class="child">T2Item1</li>
    <li transcriptionId="2" class="child">T2Item2</li>
    <li transcriptionId="2" class="child">T2Item3</li>
    <li transcriptionId="2" class="question">Question2</li>
    <li transcriptionId="2" class="child">T2Item4</li>
    <li transcriptionId="2" class="child">T2Item5</li>
    <li transcriptionId="2" class="child">T2Item6</li>
    <li transcriptionId="2" class="question">Question3</li>
    <li transcriptionId="2" class="child">T2Item7</li>
    <li transcriptionId="2" class="child">T2Item8</li>
</ul>
<!-- PaperEdit -->

<h2>PaperEdit</h2>

<ul...

CSS

ul {
    list-style: none;
    padding:0;
    margin:0;
}
li {
    /* margin: 2px; */
    cursor: pointer;
}
li.selected {
    background-color: orange;
    /* padding:  3px; */
    /*  margin: 3px; */
}
li.child {
    /*  margin-left: 20px; */
    padding: 2px;
    color:grey;
    display: inline;
}
li.child {
    /* margin-left: 2px; */
}
ul li {
    /*     color:blue; */
    /* display: inline;  */
}

JavaScript

/*
autoEdit, paperEditing D&D from transcript to paperEdit.
Two lists multiSelectable, sortable, draggable.
Using unstyled list, with non draggable Questions, and Headings in the lists.
https://github.com/shvetsgroup/jquery.multisortable

Should be changed from ul li to p span tags, to allow for HTML5 compatibility
*/
jQuery(function ($) {
    var papercuts = document.getElementById("transcription1").getElementsByClassName("child");
    //initialise multisortable lists, for transcriptions and paperedit list
    $('ul.sortable#transcription2,ul.sortable#transcription1,ul.sortable#paperedit').multisortable({
        //excluding Question and Heading section from d&d
        items: "li:not(.question,.heading)",
        //selectedClass: "child",
        //click: function(e){ console.log("I'm selected."); },
        stop: function (e) {
            //console.log("I've been sorted.");
            //make ajax call to save paperCuts server side.
            //on drop in paperEdit, an ajax request needs to update the papercuts on the server side.
            //in order to do do that it needs to get paperCuts elements from paperEdit list
            //with an on drop event listener to save list everytime things moved about in paper edit.
            console.log(papercuts);
        }
    });

    //connecting multiple of transcriptions to the paperEdit.
    $('ul#transcription1').sortable('option', 'connectWith', 'ul#paperedit');
    $('ul#transcription2').sortable('option', 'connectWith', 'ul#paperedit');
    $('ul#paperedit').sortable('option', 'connectWith', 'ul#paperedit');
    
 
    
    //keyboard shortcut using mouse trap to make selection transcript to paperEdit
    //select words shift+click to select multiple faster. 
    //cmd+right, be default they are dropped, at end of Main heading
    //https://craig.is/killing/mice
    Mousetrap.bind('command+right', function (e) {
        //need to select transcript in focus for shortcut to work properly
       ...