Question

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

使用我当前的代码，我可以移动我的元素和/或帮助程序，但只能在搜索框中移动。
如果我做其他事情，我只能使这些元素可拖动，即，当我点击任何'.search_facet'类项目时，我希望它变得可拖动，但是如果我将它用作我的事件，那么所有拖动代码变得反应迟钝。

JS

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

Answer 1

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

请参阅：http://jqueryui.com/sortable/#connect-lists

在jQuery中跨DIV拖动元素

1 个答案: