隱藏在容器外的可拖動元素

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

丟棄功能不是問題。丟棄時，該元素將分離並重新創建在其新父項下的正確位置。

我的問題是可拖動元件不能顯示它的容器外部，當容器已經position:relative;施加，所以同時拖動，當容器邊界之外移動的元件將會消失。

這種默認行爲是有意義的，因爲通常用戶想要在其容器內拖動元素。作爲一種解決方法，我假設解決方案是使用可拖動屬性「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/

非常感謝提前。

來源

2013-01-04 tomturton

我不知道這是否會解決您確切的問題，但我遇到了這個問題尋找相同的答案，這就是我發現的。

在.draggable（）的選項中，傳入helper:'clone'以自動創建項目的克隆，以便將其拖出容器。並使用appendTo:'body'將其放在<body>標記的末尾。所以，在我的情況，我的選擇看起來有點像這樣，在revert:'invalid'增加使其彈回如果不掉線某處有效：

jQuery(".myselector").draggable({ 
    helper: 'clone', 
    revert: 'invalid', 
    appendTo: 'body' 
});

來源

2013-02-18 17:16:48 Paul

幫手：'克隆'適用於我，這是因爲當拖動項被拖出其父邊界之外時，可拖動項不可見。 – Katat

Katat聽起來像你缺少appendTo：解決方案的'body'部分 –

謝謝<3，保存我的日子 –

添加的位置是：絕對爲卡樣式：

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

來源

2013-01-04 11:57:14 Saram

謝謝，這個工作，直到我申請職位：相對於每個容器。我必須使用這個屬性，因爲用戶可以加載模式。我已經相應地改變了我的問題和JSFiddle。 – tomturton

我幾個月前也有類似的問題。

我的需要是能夠從別人

這裏是我的更多的細節問題，用一個大容器的自動滾動，JqueryUI, drag elements into cells of a scrolling dropable div containing large table

我找到了一個解決方法。想法是在助手構造回調期間將元素克隆追加到可滾動容器，然後在1ms後使用setTimeout函數將輔助器附加到主體。幫助器位置必須映射到鼠標位置以避免偏移問題。

這裏是我的解決方案（的jsfiddle似乎是失望吧，嘗試後，如果沒有代碼在窗口中顯示）：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"); 
     }  
    }); 
});

來源

2013-01-05 08:39:03 sdespont

使用「克隆」幫手和隱藏物品的同時拖動它並在停止時再次顯示。

$(".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(); 
    } 
});

來源

2015-10-08 00:49:30 kavehmb

隱藏在容器外的可拖動元素

回答

相關問題