從div滾動條拖放 - 溢出-y滾動VS溢出-x可見

我已經設置jQuery拖放從一個div到另一個div，它工作正常。從div滾動條拖放 - 溢出-y滾動VS溢出-x可見

但是，源div有時會超出屏幕的高度，所以我需要爲它添加一個垂直滾動條。這就是我遇到臭名昭着的溢出問題的地方。

div需要具有overflow-x：visible，以便拖動元素在被移動到目標div時可見。但是，當我將overflow-y：scroll或overflow-y：auto添加到源div時，突然溢出x不再起作用。

我去過W3和一些StackOverflow的問題，我意識到這不是一個錯誤，但意圖的行爲（儘管爲什麼這是打算超出我）。但是，我還沒有找到適合我的解決方案。

我已經嘗試添加一個包裝div來源DIV像一些答案建議，然後執行以下操作：

.wrapper { 
    width: 100px; 
    position: absolute; 
    top: 4vw; 
    left: 0; 
    bottom: 4vw; 
    overflow-y: auto; 
} 

.source { 
    position: relative; 
    overflow: visible; 
    z-index: 2; 
} 

<div class="wrapper"> 
    <div class="source"> 
     <!-- draggable elements go here --> 
    </div> 
</div> 

<div class="target"> 
    <!-- draggable elements drop here --> 
</div>

但是，儘管源div的溢出現在即可，包裝仍然隱藏水平溢出。我想我可以將包裝的寬度增加到全屏，並使背景不可見，並使屏幕上的所有其他內容具有更高的Z-index，以便不在包裝後面，但對於這樣的包裝而言，這似乎是一個荒謬的不好的解決方案簡單的問題。

任何人都可以幫助我嗎？

如果一個CSS解決方案不實際，任何人都可以提供一些可以解決問題的Javascript？

代碼示例：jsfiddle

來源

2016-08-08 jovan

你可以來複制此問題 –

這裏有一個小提琴小提琴：https://jsfiddle.net/9ush466w/ – jovan

請檢查以下內容。如果你想拖動元素並將它們放在戰鬥位置上，你可能想要使用helper: "clone"和appendTo: "body"或任何其他選擇器，這是您的物品將被放置的地方。我還添加了containment: 'window'和scroll: false（不太確定這最後一個是否是你想要的）。

function make_draggable(elem){ 
    $(elem).draggable({ 
     revert: "invalid", 
     cursor: "move", 
     helper: 'clone', 
     appendTo: 'body', 
        containment: 'window', 
     scroll: false, 
    }); 
}

還有的也有了一些CSS修復讓你的風格仍然適用於可拖動克隆，你的身體實際上涵蓋整個區域（因爲你的獨生子女positionated絕對的，所以我們需要強制body覆蓋全高/寬）

https://jsfiddle.net/9ush466w/6/

編輯：添加自定義類和原始的元素上移除，以便可以顯示反饋給用戶。 https://jsfiddle.net/9ush466w/8/

來源

2016-08-11 11:38:05

克隆工作正常，但我寧願儘可能避免。有沒有辦法克隆並添加一些代碼來讓原始元素消失，但是如果元素被丟棄到目標區域之外，會再次出現？讓它消失不應該是一個問題，但我不確定我會在哪裏添加最後一部分。 – jovan

剛剛編輯，嘗試在https://jsfiddle.net/9ush466w/8/ –

新的小提琴我看你是如何添加/刪除額外的類到原始元素。只剩下一個小問題 - 當我用'display：none'替換'background：＃ddd'時，它不會使元素消失：https://jsfiddle.net/9ush466w/9/任何想法？在此之後，很高興獎勵賞金。 – jovan

我知道這是不完全的回答你的問題，但你做的項目拖動。看你的樣品，我想你應該考慮連接列表：

jqueryui connect lists documentation

這樣就可以採取從一個列表中的項目，並將其拖放到另一個。

這裏是一個演示的jsfiddle我發現：

connect lists fiddle demo

來源

2016-08-11 10:29:14

嘗試此修復程序。我編輯你的功能見下文。我在draggable上添加了「包容」選項。

function make_draggable(elem){ 
     $(elem).draggable({ 
      revert: "invalid", 
      cursor: "move", 
      containment: ".unit-holder-middle" 
     }); 
    }

這是你想要的嗎？看到這個jsfiddle https://jsfiddle.net/9ush466w/2/

來源

2016-08-11 11:23:14

我想相反:)在您的例子可拖動的元素甚至不能離開箱子，我需要他們離開它（在我的版本中工作），並可見（不工作在我的版本）。 – jovan

從div滾動條拖放 - 溢出-y滾動VS溢出-x可見

回答

相關問題