带有中间按钮的jquery中可选择，可拖动和可放置的项目

Question

我正在进行一项练习，以便从允许的列表或其他列表中移动：

1. 从一个列表拖放到其他项目。
2. 选择一个或多个项目，然后按＆＃34;选择＆＃34;按钮并将它们传递到右侧列表。
3. 选择左侧的一个或多个项目进行列表，然后拖放到右侧列表中。 我的问题是我不能指出第2点和第3点，给我与ui.selectable的ui.draggable和ui.droppable冲突。我不知道哪个可能是问题！

我在stackoverflow中寻找其他类似的练习，但我无法修复它。

我的代码是：

JSFiddle

＆＃13;
＆＃13;
$(document).ready(function() {

    var $listaI = $("#listaI"),
        $listaD = $("#listaD");

    // hacemos que los items de la galeria sean "draggable"
    $("li", $listaI).draggable({
        cancel: "a.ui-icon", // clicking an icon won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });


    $("#listaI").selectable({
        stop: function() {
            var result = $("#select-result").empty();
            $(".ui-selected", this).each(function() {
                var index = $("#listaI li").index(this);
                result.append("#listaD");

            });
        }
    });

    // a trash le asiganmos la interacción droppable
    $listaD.droppable({
        accept: "#listaI > li", //aceptando los ítems de la galería
        activeClass: "ui-state-highlight",
        drop: function(event, ui) {
            $(this).find(".placehold").remove();
            if ($(this).find("li").length > 2) {
                alert("No se puede agregar más de tres alumnos");
                return false;
            }
            deleteImage(ui.draggable);
        }
    });


    // a gallery le asignamos la interacción droppable también, aceptando los items de trash
    $listaI.droppable({
        accept: "#listaD li",
        activeClass: "ui-state-highlight",
        drop: function(event, ui) {
            recycleImage(ui.draggable);
        }
    });

    function deleteImage($item) {
        $item.fadeOut(function() {
            var $list = $("ul", $listaD).length ?
                $("ul", $listaD) :
                $("<ul class='listaI ui-helper-reset'/>").appendTo($listaD);
            $item.appendTo($list).fadeIn();
        });
    }

    function recycleImage($item) {
        $item.fadeOut(function() {
            $item
                .find("a.ui-icon-refresh")
                .remove()
                .end()
                .find("li")
                .end()
                .appendTo($listaI)
                .fadeIn();

            if ($("#listaD li").length == 0) {
                $("#listaD").append("<p class='placehold'>Please drag and drop items here.</p>")
            }

        });
    }
});
＆＃13;
body {
    font-family: 'Roboto', sans-serif;
}
ul,
ol,
li {
    list-style: none;
}
.widgetContain {
    width: 30%;
    display: inline;
    margin: 10px auto;
}
h1 {
    text-align: center;
}
h1.ui-widget-header {
    margin: 0px;
}
#listaD p {
    margin: 10px;
    padding: 10px;
    text-align: center;
}
#listaIzquierda {
    float: left;
    margin-left: 20px;
}
#listaI .ui-selecting {
    background: #FECA40;
}
#listaI .ui-selected {
    background: #F39814;
    color: white;
}
#listaIzquierda ul {
    padding-left: 0px;
    border: 1px solid #ccc;
}
li.ui-widget-content {
    padding: 5px;
    margin: 2px auto;
}
#listaDerecha {
    float: left;
}
#listaD {
    border: 1px solid #ccc;
    height: 300px;
}
#selecDiv {
    float: left;
    text-align: center;
}
#selecBtn {
    margin-top: 100px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<div id="listaIzquierda" class="widgetContain">
    <h1 class="ui-widget-header">List</h1>
    <ul id="listaI" class="listaI ui-helper-reset">
        <li class="ui-widget-content"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> Item 1 </li>
        <li class="ui-widget-content"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> Item 2 </li>
        <li class="ui-widget-content"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> Item 3 </li>
        <li class="ui-widget-content"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> Item 4 </li>
        <li class="ui-widget-content"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> Item 5 </li>
    </ul>
</div>
<div class="widgetContain" id="selecDiv">
    <input type="submit" value="Seleccionar" name="seleccionarBtn" id="selecBtn">
</div>
<div id="listaDerecha" class="widgetContain">
    <div id="listaD">
        <h1 class="ui-widget-header">Selected</h1>
        <p class="placehold">Please drag and drop items here.</p>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

如果有人能帮助我，我将非常感激。非常感谢你！ 此致！