是否可以使用：CSS溢出：滾動div與jQuery可拖動？

我試圖建立一個Web應用程序拖放兩個嵌套的div之間。我的問題是當我使用CSS overflow:scroll
是否可以使用：CSS溢出：滾動div與jQuery可拖動？

當我拖動可拖動的div，它消失在它自己的div後面。
我想啓用滾動。可能嗎？

的jsfiddle：
http://jsfiddle.net/rs9r9u0p/4/

HTML

<div class="container-fluid"> 
    <div class="col-sm-8 well" id="flakDiv"> 
    <div id="flakJsDiv"> 
     <center> 
     <div class='thisFlak' id='"+flakId+"'> 
     <div class='flakUp'>DROPZONE<i class='fa fa-minus-circle pull-right deleteFlakBtn'></i></div> 
     <div class='flakMiddle'><span class='flakCount'></span></div> 
     <div class='flakDown'></div> 
     </div> 
    </center> 
    </div> 
</div> 
<div class="col-sm-4 well" id="elementDiv"> 
    <div id="elementJsDiv"> 
     <div class="elementsDiv" id="'.$row['element_nr'].'" style="width: '.$langd.'px; height: '.$bredd.'px; background-color: #c2c2d6; cursor: pointer;">DRAG ME</div> 
    </div> 
    </div> 
</div>

CSS

[draggable] { 
-moz-user-select: none; 
-khtml-user-select: none; 
-webkit-user-select: none; 
user-select: none; 
/* Required to make elements draggable in old WebKit */ 
-khtml-user-drag: element; 
-webkit-user-drag: element; 
} 

#flakDiv { 
    background-color: white; 
    overflow: scroll; 
    height: 300px; 
    max-height: 300px; 
} 

#elementDiv { 
    background-color: white; 
    overflow: scroll; 
    height: 300px; 
    max-height: 300px; 
} 

.elementsDiv { 
    box-shadow: 0 0 0 1px white inset; 
} 

.thisFlak { 
    width: 600px; 
    height: 270px; 
    padding: 0 !important; 
    margin: 0 !important; 
} 

.flakUp { 
    width: 600px; 
    height: 100px; 
    border: solid 1px black; 
} 

.flakMiddle { 
    width: 600px; 
    height: 50px; 
    border: solid 1px black; 
    background-color: #ffe6e6; 
} 

.flakCount { 
    font-weight: bold; 
} 

.flakDown { 
    width: 600px; 
    height: 100px; 
    border: solid 1px black; 
}

$(document).ready(function() { 



    //Make elements Draggable 
    $('.elementsDiv').draggable({ 
    containment: "document", 
    revert: 'invalid', 
    zIndex: 100, 
    appendTo: 'document', 
    }); 


    //Make flak droppable 
    $('.flakUp').droppable({ 
    accept: '.thisFlak', 
    }); 



}); //Document Ready

我已通過添加z-index和堆棧，到JS試過..

來源

2016-02-23 Björn C

在拖動可以禁用滾動，然後在On Drop上，您可以重新啓用它。 –

@Malik這可能是個詭計。比你。我會試試這個！ –

拖動時，可以設置溢出可見：

$('.elementsDiv').draggable({ 
    containment: "document", 
    revert: 'invalid', 
    zIndex: 100, 
    appendTo: 'document', 
    start: function() { 
        $("#elementDiv").attr("style", "overflow: visible;"); 
     }, 
     stop: function() { 
        $("#elementDiv").attr("style", "overflow: scrolling;"); 
     } 
    });

在這裏看到：http://jsfiddle.net/arcLc039/

來源

2016-02-23 14:51:31 alexey

是否可以使用：CSS溢出：滾動div與jQuery可拖動？

回答

相關問題