Javascript 在jQuery中跨div拖动元素

我要做的是拖动在visualsearch.js documentcloud.github.io/visualsearch中创建的元素/‎ 搜索框类=搜索面未选中[或最后一个元素可以选中]，并将其放入单独的框中。我目前面临两个问题：

使用当前代码，我可以移动元素和/或助手，但只能在搜索框中移动。 我只能在执行其他操作时使这些元素成为可拖动的，例如，我希望在单击任何“.search_facet”类项目时使其成为可拖动的，但如果我将其用作我的事件，则所有拖动代码都将变为无响应。 JS

HTML

---

您可能正在寻找jQuery.sortable和connectWith来连接要在其中拖动的元素

---

请参阅：

我肯定认为使用.sortable函数比使用.draggable要好，但我仍然无法将元素从一个div移动到另一个div。我仍然可以使用appendTo，至少可以超出容器的边界，但它会丢失样式，并且不会在另一个放置目标中停止。

//Creates object on which to apply event [See issue #2]
$(document).ready(function(){
    $( init );
    function init() {
        $('#makeMeDraggable').draggable();
    }
});
//Applies draggability to '.search_facet'
$(document).ready(function(){
    $('#makeMeDraggable').click(function(){
        $('.search_facet').draggable({
            cursor: 'move',
            helper: 'clone',
            //appendTo: '.droppable', /*If uncommented, element can leave the search box, but loses entire styling and form */
            zIndex: 99999
        });
    });
});
//Creates droppable target
$(document).ready(function(){
    $('.droppable').droppable({
        drop: 'handleDrop',
        tolerance: 'touch',
        zIndex: 1
    });
    //Should allow for dragging between DIVs?
    function handleDrop(event,ui) {
        var targetDIV = document.getElementById('targetDIV');
        var dropTarget = $(this);
        ui.draggable.insertBefore(dropTarget);
    };
});

<span>
    <div id="search_box_container"></div> //These two elements implement visualsearch
    <div id="search_jquery">&nbsp;</div> //These two elements implement visualsearch
    <div id="makeMeDraggable"></div> //Creates a box to click that allows draggability
    <div class="droppable"></div> //Creates a droppable target
</span>