JQuery UI, sortable and selectable

Question 1

Here is my workaround for making a list selectable and sortable and allows for lasso implementation. Here is the fiddle.

<html>
<meta charset="utf-8" />
<title>jQuery UI Sortable with Selectable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
$(function() {
//

$('body').selectable({
    filter: 'li'
    //filter: '#album2 > li'
});

/*
Since the sortable seems unable to move more than one object at a 
time, we'll do this:

The LIs should act only as wrappers for DIVs.

When sorting a LI, move all the DIVs that are children of selected 
LIs to inside the sorting LI (this will make them move together);
but before doing that, save inside the DIVs a reference to their
respective original parents, so we can restore them later.

When the user drop the sorting, restore the DIVs to their original
parent LIs and place those LIs right after the just-dropped LI.

Voilá!

Tip: doesn't work so great if you try to stick the LIs inside the LI
*/

$('.connectedSortable').sortable({
    connectWith: ".connectedSortable",
    delay: 100,
    start: function(e, ui) {
        var topleft = 0;

        // if the current sorting LI is not selected, select
        $(ui.item).addClass('ui-selected');

        $('.ui-selected div').each(function() {

            // save reference to original parent
            var originalParent = $(this).parent()[0];
            $(this).data('origin', originalParent);

            // position each DIV in cascade
            $(this).css('position', 'absolute');
            $(this).css('top', topleft);
            $(this).css('left', topleft);
            topleft += 20;

        }).appendTo(ui.item); // glue them all inside current sorting LI

    },
    stop: function(e, ui) {
        $(ui.item).children().each(function() {

            // restore all the DIVs in the sorting LI to their original parents
            var originalParent = $(this).data('origin');
            $(this).appendTo(originalParent);

            // remove the cascade positioning
            $(this).css('position', '');
            $(this).css('top', '');
            $(this).css('left', '');
        });

        // put the selected LIs after the just-dropped sorting LI
        $('#album .ui-selected').insertAfter(ui.item);

        // put the selected LIs after the just-dropped sorting LI
        $('#album2 .ui-selected').insertAfter(ui.item);
    }
});




//
});


<style>
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#album {
    list-style: none;
    float: left;
    width: 20%;
    border: 1px solid blue;
}
#album2 {
    list-style: none;
    float: left;
    width: 20%;
    border: 1px solid blue;
}
#album li  {
    float: left;
    margin: 5px;
}

#album2 li  {
    float: left;
    margin: 5px;
}


#album div {
    width: 100px;
    height: 100px;
    border: 1px solid #CCC;

    background: #F6F6F6;    
}
#album2 div {
    width: 100px;
    height: 100px;
    border: 1px solid #CCC;

    background: #F6F6F6;    
}
#album .ui-sortable-placeholder {
    border: 1px dashed #CCC;
    width: 100px;
    height: 100px;
    background: none;
    visibility: visible !important;
}
#album2 .ui-sortable-placeholder {
    border: 1px dashed #CCC;
    width: 100px;
    height: 100px;
    background: none;
    visibility: visible !important;
}

#album .ui-selecting div, 
#album .ui-selected div {
    background-color: #3C6;
}

#album2 .ui-selecting div, 
#album2 .ui-selected div {
    background-color: #3C6;
}

#anotheralbum {
    list-style: none;
    float: left;
    width: 20%;
    height: 800px;
    border: 1px solid green;
}
</style>


<body>

<ul id="album" class="connectedSortable">
    <li id="li1"><div>1- First</div></li>
    <li id="li2"><div>2- Second</div></li>
    <li id="li3"><div>3- Third</div></li>
    <li id="li4"><div>4- Fourth</div></li>
    <li id="li5"><div>5- Fifth</div></li>
    <li id="li6"><div>6- Sixth</div></li>
    <li id="li7"><div>7- Seventh</div></li>
    <li id="li8"><div>8- Eighth</div></li>
</ul>

<ul id="album2" class="connectedSortable">
    <li id="li1"><div>1- 1</div></li>
    <li id="li2"><div>2- 2</div></li>
    <li id="li3"><div>3- 3</div></li>
    <li id="li4"><div>4- 4</div></li>
    <li id="li5"><div>5- 5</div></li>
    <li id="li6"><div>6- 6</div></li>
    <li id="li7"><div>7- 7</div></li>
    <li id="li8"><div>8- 8</div></li>
</ul>
<div id="anotheralbum" class="connectedSortable">
another album - no style for the lists inside here
</div>

<br style="clear:both">
</body>
</html>

Question 2

I managed to get it somewhat working. Check the fiddle.

Basically, I used the jquery.multisortable plugin which extends the default sortable widget. This way, you can select multiple items by Ctrl+clicking them. You can drag to re-order and/or move items between lists.

Alternatively, if you want to stick to your original mechanism with selection rectangles and drag handles, you can still use selectable (demo). The only downside is that the multiselectable behaviour behind multisortable stays active, which means that it still attempts to handle Ctrl+clicks (but fails). It's just a minor nuisance and you can probably tweak the code of multisortable so it does not extend multiselectable which should solve this.

Question 3

Because a drag action is more or less the same action as doing a selection you have to cancel selection if an item has already been selected.

$(".available, .assigned").selectable({ 
    filter: "li", 
    cancel: ".ui-selected"
})

$("available, .assigned").sortable()