添加一個在另一個粘滯便箋

在此先感謝，我試圖添加粘滯圖像一個在另一個之後，如下圖所示，但我得到的結果作爲一個在另一個下。最新增加的便籤應該在最前面，所有其他便籤都將落後最新。任何幫助將被理解。添加一個在另一個粘滯便箋

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<style> 
 
.pink{ 
 
\t background:#f05f9d; 
 
\t border:1px solid #f05f9d; 
 
\t color:#fff; 
 
\t font-weight:600; 
 
} 
 
.pink:hover{ 
 
\t background:#f05f9d; 
 
\t border:1px solid #f05f9d; 
 
\t color:#fff; 
 
\t font-weight:600; 
 
} 
 
.pink-button{ 
 
\t padding: 10px 11px; 
 
\t border-radius: 14px; 
 
\t font-weight: 600; 
 
\t font-size: 16px; 
 
} 
 
.sticky { 
 
\t margin: 0; 
 
\t padding: 8px 24px; 
 
\t width:200px; 
 
\t height:200px; 
 
\t font-size: 1.4em; 
 
\t border:1px #E8Ds47 solid; 
 
\t -moz-box-shadow:0px 0px 6px 1px #333333; 
 
\t -webkit-box-shadow:0px 0px 6px 1px #333333; 
 
\t box-shadow:0px 0px 6px 1px #333333; 
 
\t background: #fefdca; 
 
\t background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); 
 
\t background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0); 
 
\t background: linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
} 
 
.sticky p { 
 
\t text-align: center; 
 
} 
 
.sticky textarea { 
 
\t width:160px; 
 
\t height:170px; 
 
\t background: #fefdca; 
 
\t background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); 
 
\t background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0); 
 
\t background: linear-gradient(top, #fefdca 0%,#f7f381 100%); 
 
\t border-bottom:none !important; 
 
} 
 
.sticky ol { 
 
\t margin: 12px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="sticky"> 
 
    <textarea placeholder="Type the problem here..."></textarea> \t \t \t \t 
 
</div><br/> \t \t 
 
<div id="spin_btn_div"> 
 
    <div class="btn-container" style="margin-bottom:0px;position:absolute;margin-left:40px;"> 
 
     <a class="btn pink pink-button shooter-btn" id="addProblem">Add problem</a> 
 
\t </div> 
 
</div> 
 
</body> 
 
<script> 
 
$('#addProblem').click(function(){ 
 
\t $('.sticky').after('<div class="sticky"><textarea placeholder="Type the problem here..."></textarea><br></div>'); 
 
}); 
 
</script> 
 
</html>

來源

2017-10-18 Ganesh Putta

嘗試將'.sticky'設置爲'position：absolute;'然後在他們的父對象上設置'position：relative;'，然後使用它們的'z-index'和'left/right'屬性。 – Krusader

試試這個https://jsfiddle.net/x7cqphq9/ – Krusader

嗯，完美...，但它是像一個在另一個上面添加，我想像一個在另一個像在上面的圖像... ...！ –

位置，你粘，並將其放置在容器內。然後根據.sticky計數分配left值。檢查下面的代碼段。

$('#addProblem').click(function() { 
 
    $('.sticky').after('<div class="sticky"><textarea placeholder="Type the problem here..."></textarea><br></div>'); 
 
    var stickyCount = $('.sticky').length - 1; 
 
    $('.sticky').each(function() { 
 
    $(this).css('left', stickyCount * 100); 
 
    stickyCount--; 
 
    }); 
 
});

.pink { 
 
    background: #f05f9d; 
 
    border: 1px solid #f05f9d; 
 
    color: #fff; 
 
    font-weight: 600; 
 
} 
 

 
.pink:hover { 
 
    background: #f05f9d; 
 
    border: 1px solid #f05f9d; 
 
    color: #fff; 
 
    font-weight: 600; 
 
} 
 

 
.pink-button { 
 
    padding: 10px 11px; 
 
    border-radius: 14px; 
 
    font-weight: 600; 
 
    font-size: 16px; 
 
} 
 

 
.sticky { 
 
    margin: 0; 
 
    padding: 8px 24px; 
 
    width: 200px; 
 
    height: 200px; 
 
    font-size: 1.4em; 
 
    border: 1px #E8Ds47 solid; 
 
    -moz-box-shadow: 0px 0px 6px 1px #333333; 
 
    -webkit-box-shadow: 0px 0px 6px 1px #333333; 
 
    box-shadow: 0px 0px 6px 1px #333333; 
 
    background: #fefdca; 
 
    background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefdca), color-stop(100%, #f7f381)); 
 
    background: -webkit-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -o-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -ms-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381', GradientType=0); 
 
    background: linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
} 
 

 
.sticky p { 
 
    text-align: center; 
 
} 
 

 
.sticky textarea { 
 
    width: 160px; 
 
    height: 170px; 
 
    background: #fefdca; 
 
    background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefdca), color-stop(100%, #f7f381)); 
 
    background: -webkit-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -o-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    background: -ms-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381', GradientType=0); 
 
    background: linear-gradient(top, #fefdca 0%, #f7f381 100%); 
 
    border-bottom: none !important; 
 
} 
 

 
.sticky ol { 
 
    margin: 12px; 
 
} 
 

 
.sticky-container { 
 
    position: relative; 
 
    min-height: 250px; 
 
} 
 

 
.sticky { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="sticky-container"> 
 
    <div class="sticky"> 
 
    <textarea placeholder="Type the problem here..."></textarea> 
 
    </div> 
 
</div><br/> 
 
<div id="spin_btn_div"> 
 
    <div class="btn-container"> 
 
    <a class="btn pink pink-button shooter-btn" id="addProblem">Add problem</a> 
 
    </div> 
 
</div>

來源

2017-10-18 10:34:01

謝謝你......但是當我第三次單擊添加按鈕時，多個便籤正在添加..！ –

真棒兄弟..！我只是對你的代碼做了一些修改，最後它的工作原理，你真的值得投票...！ –

@GaneshPutta希望你的代碼片段遵循亂七八糟的規定。 –

這裏是我的版本

HTML：

<section class="sticky-wrapper"> 
    <div class="sticky"> 
    <textarea placeholder="Type the problem here..."></textarea>    
    </div> 
</section> 
<br/> 
<div id="spin_btn_div"> 
    <div class="btn-container"> 
    <a class="btn pink pink-button shooter-btn" id="addProblem">Add problem</a> 
</div>

CSS

.sticky-wrapper { 
    position: relative; 
    min-height: 300px; 
} 

.pink{ 
    background:#f05f9d; 
    border:1px solid #f05f9d; 
    color:#fff; 
    font-weight:600; 
} 

.pink:hover{ 
    background:#f05f9d; 
    border:1px solid #f05f9d; 
    color:#fff; 
    font-weight:600; 
} 
.pink-button{ 
    padding: 10px 11px; 
    border-radius: 14px; 
    font-weight: 600; 
    font-size: 16px; 
} 
.sticky { 
    position: absolute; 
    margin: 0; 
    padding: 8px 24px; 
    width:200px; 
    height:200px; 
    font-size: 1.4em; 
    border:1px #E8Ds47 solid; 
    -moz-box-shadow:0px 0px 6px 1px #333333; 
    -webkit-box-shadow:0px 0px 6px 1px #333333; 
    box-shadow:0px 0px 6px 1px #333333; 
    background: #fefdca; 
    background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); 
    background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0); 
    background: linear-gradient(top, #fefdca 0%,#f7f381 100%); 
} 
.sticky p { 
    text-align: center; 
} 
.sticky textarea { 
    width:160px; 
    height:170px; 
    background: #fefdca; 
    background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); 
    background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0); 
    background: linear-gradient(top, #fefdca 0%,#f7f381 100%); 
    border-bottom:none !important; 
} 
.sticky ol { 
    margin: 12px; 
}

的JavaScript：

var zIndex = 0; 
var currentXPosition = 0; 

$('#addProblem').click(function(){ 

    zIndex++; 

    $('.sticky-wrapper').append('<div class="sticky" style="z-index: ' + zIndex +'; left: 0px"><textarea placeholder="Type the problem here..."></textarea><br></div>'); 


    $(".sticky-wrapper").find(".sticky:not(:last-child)").each(function (i, item) { 
     var itemLeftPos = parseInt(item.style.left || 0); 
     currentXPosition = 100; 
     item.style.left = (itemLeftPos + currentXPosition) + "px"; 
    }); 

});

注：我添加包裝元素與.sticky-wrapper類。 Link to JSFiddle

來源

2017-10-18 12:29:03 Krusader

添加一個在另一個粘滯便箋

回答

相關問題