在 jQuery 中跨 DIV 拖动元素答案

【问题标题】：Dragging element across DIVs in jQuery在 jQuery 中跨 DIV 拖动元素
【发布时间】：2014-04-03 15:57:11
【问题描述】：

我想做的是拖动在visualsearch.js（documentcloud.github.io/visualsearch/‎）搜索框中创建的元素（class="search_facet not_editing not_selected" [或者最后一个元素可以是“is_selected "]) 并将其放入单独的框中。我目前面临两个问题：

使用我当前的代码，我可以移动我的元素和/或助手，但只能在搜索框中。
如果我做其他事情，我只能使这些元素成为可拖动的，也就是说，当我单击任何“.search_facet”类项时，我希望它成为可拖动的，但如果我使用它作为我的事件，所有拖动代码变得没有反应。

//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);
    };
});

HTML

<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>

【问题讨论】：

标签： javascript jquery jquery-ui draggable

【解决方案1】：

您可能正在寻找带有 connectWith 的 jQuery.sortable() 来连接您想要在其间拖动的元素。

见：http://jqueryui.com/sortable/#connect-lists

【讨论】：

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