jquery-ui - vue - jquery ui sortable




可移動元素隱藏在容器外部 (3)

使用“克隆”助手並在拖動項目時隱藏該項目並在停止時再次顯示該項目。

$(".removalbe-recom").draggable({
    appendTo: "body",
    helper: "clone",
    revert: "invalid",
    cursor: "move",
    containment: "document",
    zIndex: 10000,
    scroll:false,
    start: function (event, ui) {
    $(this).hide();
    },
    stop: function (event, ui) {
        $(this).show();
    }
});

使用jQuery UI,我試圖創建一個帶有兩個可滾動容器的接口,每個容器包含許多可拖動元素。 用戶可以將元素從一個容器拖到另一個容器。

刪除功能不是問題 。 刪除後,元素將被分離並在其新父項下的正確位置重新創建。

我的問題是, 當容器有position:relative;可拖動元素不能顯示在容器外position:relative; 應用 ,因此在拖動時,元素在移出容器邊界外時將消失。

此默認行為是有意義的,因為通常用戶希望在其容器內拖動元素。 作為一種解決方法,我假設解決方案是使用draggable屬性'appendTo',我認為它會將元素移動到其容器之外,但不幸的是,這似乎沒有任何影響。

DOM :(每個視圖都是可滾動的,每個容器都有位置:相對的,並且可以保存所有元素所需的大小)

BODY
    VIEW 1
        CONTAINER
            DRAGGABLE ELEMENTS
    VIEW 2
        CONTAINER
            DRAGGABLE ELEMENTS

使用Javascript:

$('div.card').draggable({
    appendTo: 'body',
    scroll: false //stops scrolling container when moved outside boundaries
});

有關問題的簡化說明,請參閱JSFiddle。 我不想用可放置的代碼來膨脹示例,所以這只是說明了拖動問題。 http://jsfiddle.net/Em7Ak/

提前謝謝了。


幾個月前我遇到過類似的問題。

我的需要是能夠使用其他人的一個大容器的自動滾動

這是我的問題,更多細節, JqueryUI,將元素拖動到包含大表的滾動可刪除div的單元格中

我找到了解決方法。 我們的想法是在幫助器構造回調期間將元素clone附加到可滾動容器,然後在1ms後使用setTimeout函數將幫助器附加到body。 輔助位置必須映射到鼠標位置以避免偏移問題。

這是我的解決方案(JSFiddle現在似乎已關閉,如果窗口中沒有顯示代碼,請稍後再試): http://jsfiddle.net/QvRjL/134/http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },
        appendTo: 'body',
        containment: 'body',        
        scroll: true,
        helper: function(){ 
            //Hack to append the cartridge to the body (visible above others divs), 
            //but still belonging to the scrollable container  
            $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>');   
            $("#clone").hide();
            setTimeout(function(){
                $('#clone').appendTo('body'); 
                $("#clone").show();
            },1);
            return $("#clone");
        }    
    });
});​

添加位置:絕對卡片樣式:

div.card {
    position:absolute;
    width:100px; height:50px;
    border:1px black solid;
    background-color:orange;
    text-align:center; vertical-align:middle;
}




jquery-ui-draggable