在jQuery中跨DIV拖動元素

我想要做的是拖動在visualsearch.js（documentcloud.github.io/visualsearch/）搜索框中創建的元素（class =「search_facet not_editing not_selected」[或最後一個元素可以是「is_selected」]）並將其放入一個單獨的框中。我目前面臨兩個問題：在jQuery中跨DIV拖動元素

用我目前的代碼，我可以移動我的元素和/或助手，但只能在搜索框中。
我只能讓這些元素可拖動，如果我做了其他的事情，也就是說，當我點擊任何'.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>

來源

2014-04-03 EGibbs87

-1

你可能會尋找jQuery.sortable（）與connectWith到要之間拖動的元素進行連接。

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

來源

2014-04-03 16:06:23

我絕對認爲使用.sortable（）函數會比使用.draggable（）更好，但我仍然無法從一個DIV元素移動到另一個。我仍然可以使用appendTo至少到達容器的邊界之外，但它會失去樣式，並且不會停止在其他放置目標中。 – EGibbs87

在jQuery中跨DIV拖動元素

回答

相關問題