如何使在溢出容器內前面總是出現拖動圖像

Question

我有問題，讓我拖動圖像總是在前面， 我時，我的容器沒有溢出風格 沒有問題，但我需要我的容器有overflow- X：自動;因爲我有很多圖像顯示：

但是當我把溢出x：auto;當我將它拖到出現在其自己的容器，但擴大溢流背面的圖像..

這裏是我的html：

<div id="dvSource"> 
<img alt="" name="Cocolate" quantity="1" price="20.99" src="images/flavor/Chocolate.png" /> 
       <img alt="" name="Mint-Chocolate-Chip" quantity="1" price="40.99" src="images/flavor/Mint-Chocolate-Chip.png" /> 
       <img alt="" name="Triple-Tornado" quantity="1" price="20.99" src="images/flavor/Triple-Tornado.png" /> 
       <img alt="" name="Vanilla-Bean" quantity="1" price="50.99" src="images/flavor/Vanilla-Bean.png" /> 
       <img alt="" name="Vanilla" quantity="1" price="30.9" src="images/flavor/Vanilla.png" /> 
       <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" /> 
       <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" /> 
       <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" /> 
         <img alt="" name="Cocolate" quantity="1" price="20.99" src="images/flavor/Chocolate.png" /> 
       <img alt="" name="Mint-Chocolate-Chip" quantity="1" price="40.99" src="images/flavor/Mint-Chocolate-Chip.png" /> 
       <img alt="" name="Triple-Tornado" quantity="1" price="20.99" src="images/flavor/Triple-Tornado.png" /> 
       <img alt="" name="Vanilla-Bean" quantity="1" price="50.99" src="images/flavor/Vanilla-Bean.png" /> 
       <img alt="" name="Vanilla" quantity="1" price="30.9" src="images/flavor/Vanilla.png" /> 
       <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" /> 
       <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" /> 
       <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" /> 
      </div> 

和我對jQuery的可拖動圖像：

$("#dvSource img").draggable({ 
       revert: "invalid", 
       snap: "#dvSource", 
       stack: ".draggable", 
       refreshPositions: true, 
       drag: function (event, ui) { 
       ui.helper.addClass("draggable"); 
       }, 
)}; 

我搜索，發現這可能有幫助

stack: ".draggable", 

但仍然是我的形象仍然是在同一個結果容器的後面

爲了更清楚看到我下面的問題，圖像：

這裏是我想要的結果，當我拖動圖像：

這裏是我的CSS容器

#dvSource 
     { 
      border: 5px solid #ccc; 
      padding: 5px; 
      min-height: 50px; 
      width: 885px; 
      height:120px; 
      overflow-x: auto; 
      overflow-y: auto; 

     } 

和CSS圖像

img 
     { 
      height: 120px; 
      width: 120px; 
      margin: 1px; 
      border:solid gray 2px; 

     } 

提前感謝！..

Answer 1

jQuery的draggable與relative定位的元素並不總是容易的工作。在你的情況下，你可能想看看sortable，它可能會更好地滿足你的需求。

https://jqueryui.com/sortable/

除此之外，爲您解決問題的一個方法是使用appendTo選項，並將其設置爲'body'。如果你的元素不在溢出div之外，我認爲你不能移動它。 AppendTo會把它拿出來，所以它會在溢出div前面。

但要使用appendTo，則需要將helper設置爲clone。如果你想保持你想要的效果，你可以在start事件原始元素設置爲opacity: 0，然後在stop設置回1

它可能的工作，但你可能需要一些調整。它應該是這樣的：

$("#dvSource img").draggable({ 
       helper: 'clone'. 
       appendTo: 'body', 
       revert: "invalid", 
       snap: "#dvSource", 
       stack: ".draggable", 
       refreshPositions: true, 
       start: function(event, ui){ 
        $(this).css('opacity', '0'); 
       }, 
       stop: function(event, ui){ 
        $(this).css('opacity', '1'); 
       } 
       drag: function (event, ui) { 
       ui.helper.addClass("draggable"); 
       }, 
)}; 

但同樣，你應該看看sortable，從我瞭解的FOM你的問題，我認爲這將是更合適的。