JQuery Сортируемый (с мультисортируемым расширением) Shifting & Adding li Items

Question

Я работаю с JQuery Сортировка с использованием расширенного мультисортируемого (https://jqueryui.com/sortable/, и мы расширили это: https://github.com/shvetsgroup/jquery.multisortable)

У меня есть 2 проблемы, над которыми я работал в течение последних 2 дней, которые я просто не могу понять.

1. Если я переместу изображение из «Доступных слайдов» в 3-й блок на «Улучшенных слайдах», оно зафиксируется в 3-й позиции. Затем я перемещаю еще один слайд из списка «Доступные слайды» в положение 1, он сдвигает слайд 3-й позиции вниз в 4-ю позицию и добавляет еще один li в нижнюю часть списка.

Мне нужно это, чтобы принять слайд в том месте, где он был размещен, и остаться там, он не должен автоматически настраиваться для меня и не должен добавлять дополнительные элементы li к моей ул.

Если я выберу слайд и переместу его в Расширенные слайды, он останется выбранным, я выберу другой слайд из Доступных слайдов, и теперь у меня будет 2 выбранных слайда. Мне нужно, чтобы отменить выбор слайда, который был перемещен в расширенные слайды при наведении мыши. Он мне нужен только для мульти-выбора другого элемента, если я нажал Ctrl или Shift, а если нет, то при щелчке любого слайда он должен отменить выбор ранее выбранного слайда.

<?php
/* Enhanced Slide Select */
$sql = "SELECT `chapter_name` FROM `slide_chapters` WHERE `chapter_id`='$_GET[chapter_id]' LIMIT 1";
if(!$result = $mysqli->query($sql)){
    die('There was an error running the query [' . $mysqli->error . ']');
}
while($row = $result->fetch_row()){
    $chapter_name = $row[0];
}


?>

<style type="text/css" >

#header {
    width: 100%;
    height: 60px;
    background-color: #06678D;
    padding: 10px; 
    }

#header>h1 {
    margin: 0px;
    color: #FFF;
    }

#wrapper>div, html {
    min-height: 100% !important;
    height: 100%;
    }

#wrapperdiv, .container-fluid {
    width: 100%;
    min-height: 100% !important;
    padding: 10px;
    background-color: #F4F4F4;
    }

#breadcrumb {
    float: right;
    margin-top: -10px;
    color: #FFF;
    }

#controls {
    float: right;
    margin: 5px 0px 5px 0px;
    }

li.sortable-li  { 
    width: 300px;
    margin: 0px; 
    cursor: pointer;
    padding: 0px;
    }

li.sortable-li {
    height: 175px;
    margin-bottom: 10px;
    }


/*li.selected {
    outline: 2px solid green;
    }
*/

li.child { 
    margin: 0px;
    }

.thumbnail {
    width: 293px;
    }

.ui-state-highlight { 
    height: 175px;
    width: 300px;
    margin-bottom: 10px;
    background-color: #5CB85C; 
    }

ul {
    list-style-type: none;
    }

.list-header {
    font-weight: bold; 
    font-size: 1.4em; 
    color: #666;
    margin-left: 115px;
    }

.slide-lists {
    width: 33%; 
    height: 100%;
    float: left;
    }

#slide-wrapper {
    margin-top: 70px;
    }

.list-item {
    vertical-align: top;
    margin-top: 30px;
    }

#list2>li {
    padding: 0px;
    border: 3px dotted red;
    }

li.selected>img {
    outline: 4px solid #5CB85C;
}


#list2>li.selected, #list3>li.selected {

    width: 298px;
    height: 175px;
    }


</style>

<script src="../js/jquery.multisortable.js"></script>

<script>
jQuery(function($){
    $('ul.sortable').multisortable();
    //$('ul#list2').sortable('option', 'connectWith', 'ul#list3');
    $('ul#list3').sortable('option', 'connectWith', 'ul#list2');



});

$( function() {
    $( ".sortable" ).sortable({
      placeholder: "ui-state-highlight"
    });
    $( ".sortable" ).disableSelection();


  } );


</script>

<div id="header">
<h1>Enhanced Slides</h1>
<span id="breadcrumb">Editing Chapter: <?php echo $chapter_name ?></span>
</div>

<div class="alert alert-info">
  First, Upload your Enhanced Slides using the Upload Slides button. Then, drag the Available Slides to the Enhanced Slides box next to the Current Slide you wish to associate it with.
</div>

<div id="wrapperdiv">

<div id="controls">
    <button class="btn btn-success" name="upload">Upload Slides</button>
    <button class="btn btn-primary" name="save">Save</button>
    <button class="btn btn-danger" name="cancel">Cancel</button>
</div>


<div id="slide-wrapper">

<div class="slide-lists">
        <span class="list-header">Current Slides</span>

        <ul id="list1" class="list-item">

            <?php
                $sql = "SELECT * FROM `slides` WHERE `chapter` = $_GET[chapter_id]";
                if(!$result = $mysqli->query($sql)){
                    die('There was an error running the query [' . $mysqli->error . ']');
                }
                    $totalCurrent = 0;
                while($row = $result->fetch_assoc()){
                    $totalCurrent++;
                    echo "<li class='sortable-li'><img class='thumbnail' id='cslide".$totalCurrent."' src='../projects/uploads/".$_GET[meeting_id]."/thumbnail".$row['slidename']."'></li>";

                }
            ?>

        </ul>
</div>

<div class="slide-lists">
        <span class="list-header">Enhanced Slides</span>
        <ul id="list2" class="sortable list-item">
            <?php 
            $totalEnhanced = 0;
            while ($totalEnhanced <= $totalCurrent -1){
                $totalEnhanced++;
                echo "<li class='sortable-li' id='eslide".$totalEnhanced."'></li>";
            }
            ?>
        </ul>
</div>      

<div class="slide-lists">
        <span class="list-header">Available Slides</span>
        <ul id="list3" class="sortable list-item">
            <li class="sortable-li"><img class="thumbnail" src="../img/enhanced_slides/Slide3.JPG"></li>
            <li class="sortable-li"><img class="thumbnail" src="../img/enhanced_slides/Slide4.JPG"></li>
            <li class="sortable-li"><img class="thumbnail" src="../img/enhanced_slides/Slide5.JPG"></li>
            <li class="sortable-li"><img class="thumbnail" src="../img/enhanced_slides/Slide6.JPG"></li>
        </ul>
</div>    


</div>

</div>