Jquery - 如何設置溢出滾動多拖放可拖動

我有四個可拖動的div在頁面上。另外，我還有許多可拖放到每個可拖放對象中的可拖動對象。Jquery - 如何設置溢出滾動多拖放可拖動

如果我拖放足夠多的拖拽到一個可拖拽然後溢出。我想要做的就是在需要時啓用overflow-y: scroll;該droppable。

問題是如果我有'overflow-y：scroll'，啓用，然後可拖動的出現在可拖動的div下面（例如它們消失）。或者，如果我沒有設置「overflow-y：」，那麼它顯然會溢出。下面的代碼是你可以運行的代碼片段（注意：你可能需要在全屏中看到這個問題）。

任何幫助，將不勝感激:)

$(document).ready(function() { 
 

 
    setDraggables(); 
 
    setDroppables(); 
 

 
}); 
 

 
// Manage drag and drop of added items 
 
$(document).on('drag', 'div.uiTask', function(e) { 
 

 
}); 
 

 
function setDraggables() { 
 
    $('.uiTask').draggable(); 
 
} 
 

 
function setDroppables() { 
 

 
    $("#urgentImportantTopLeft").droppable({ 
 
    drop: function(event, ui) { 
 
     $(this).append('<div class="uiTask">This is a task</div>'); 
 
     setDraggables(); 
 
     ui.draggable.remove(); 
 
    } 
 
    }); 
 

 
    $("#urgentImportantTopRight").droppable({ 
 
    drop: function(event, ui) { 
 
     $(this).append('<div class="uiTask">This is a task</div>'); 
 
     setDraggables(); 
 
     ui.draggable.remove(); 
 
    } 
 
    }); 
 

 
    $("#urgentImportantBottomLeft").droppable({ 
 
    drop: function(event, ui) { 
 
     $(this).append('<div class="uiTask">This is a task </div>'); 
 
     setDraggables(); 
 
     ui.draggable.remove(); 
 
    } 
 
    }); 
 

 
    $("#urgentImportantBottomRight").droppable({ 
 
    drop: function(event, ui) { 
 
     $(this).append('<div class="uiTask">This is a task</div>'); 
 
     setDraggables(); 
 
     ui.draggable.remove(); 
 
    } 
 
    }); 
 
}

#urgentImportant { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#urgentImportantTopLeft, 
 
#urgentImportantTopRight, 
 
#urgentImportantBottomLeft, 
 
#urgentImportantBottomRight { 
 
    z-index: 0; 
 
    height: 50%; 
 
    border: 1px solid white; 
 
} 
 
.tasks {} .uiTask { 
 
    display: inline-block; 
 
    width: 100%; 
 
    padding: 0.5em; 
 
    margin: 0.25em 0.25em; 
 
    background-color: grey; 
 
    border-radius: 5px; 
 
    cursor: grab; 
 
    z-index: 1000; 
 
}

<head> 
 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
</head> 
 

 
<div id="urgentImportant"> 
 
    <div id="urgentImportantTopLeft" class="w3-container w3-half w3-blue">Urgent/Important 
 

 
    <div class="tasks"></div> 
 
    <div class="uiTask">This is a task</div> 
 
    <div class="uiTask">This is a task</div> 
 
    <div class="uiTask">This is a task</div> 
 
    <div class="uiTask">This is a task</div> 
 
    <div class="uiTask">This is a task</div> 
 
    <div class="uiTask">This is a task</div> 
 
    <div class="uiTask">This is a task</div> 
 
    <div class="uiTask">This is a task</div> 
 
    <div class="uiTask">This is a task</div> 
 
    </div> 
 

 
    <div id="urgentImportantTopRight" class="w3-container w3-half w3-blue">Not urgent/Important 
 
    <br> 
 
    <br> 
 
    <div class="uiTask">This is a task</div> 
 
    </div> 
 
    <div id="urgentImportantBottomLeft" class="w3-container w3-half w3-blue">Urgent/Not important 
 
    <br> 
 
    <br> 
 
    <div class="uiTask">This is a task</div> 
 
    </div> 
 
    <div id="urgentImportantBottomRight" class="w3-container w3-half w3-blue">Not urgent/Not important 
 
    <br> 
 
    <br> 
 
    <div class="uiTask">This is a task</div> 
 
    </div> 
 
</div>

來源

2015-10-29 bwash70

You have to use some jquery draggable methods to handle this,i have updated  your code below. 
//replace your setDraggables func with this. 
function setDraggables() { 
    $('.uiTask').draggable({ 
     helper: 'clone', 
     revert: 'invalid'  
    }); 
} 

//change your css as this 
#urgentImportantTopLeft, 
#urgentImportantTopRight, 
#urgentImportantBottomLeft, 
#urgentImportantBottomRight { 
    z-index: 0; 
    height: 50%; 
    border: 1px solid white; 
    overflow:scroll; 
} 

.tasks { 
    overflow: overlay; 
} 

.uiTask { 
    display: block; 
    width: 20%; 
    padding: 0.5em; 
    margin: 0.25em 0.25em; 
    background-color: grey; 
    border-radius: 5px; 
    cursor: grab; 
    z-index: 1000; 
}

來源

2015-10-29 12:27:37

感謝Vinoth - 我剛搬了'溢出：覆蓋;''到{.tasks}'和添加'溢出：滾動;'到urgentImportant * divs和所有工作。注意：編輯答案以反映實際修復。感謝堆。 – bwash70

Jquery - 如何設置溢出滾動多拖放可拖動

回答

相關問題