代码之家  ›  专栏  ›  技术社区  ›  Ari

动态创建的div在移除其他div时不保持位置

  •  1
  • Ari  · 技术社区  · 6 年前

    很难解释,但我已经建立了一个小便笺应用程序。300pxx300px注释的HTML通过按钮动态插入。然后,可以通过单击便笺中的X来删除便笺。

    使用jQueryUI的.draggable()

    这是我的jsfiddle演示 https://jsfiddle.net/29gf8wh3/1/

    <div id='canvas'>
    <div class='note'>
        <div id='note_menu'>
            <i class="btn_close fas fa-times"></i>
            <i class="float-right fas fa-bars"></i>
            <textarea class='note_text'></textarea>
        </div>
    </div>
    </div>
    

    注释css

    .note {
    background-color: #F4F4F0;
    -webkit-box-shadow: 10px 10px 39px -9px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 39px -9px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 39px -9px rgba(0, 0, 0, 0.75);
    width: 300px;
    height: 300px;
    }
    

    我的剧本

    $(document).ready(function () {
    

    $('.note').draggable();

    // Deletes note respective to close button clicked.
    $(document).on('click', '.btn_close', function(){
        $(this).parent().parent().remove();
    });
    
    
    $('#btn_add').click(function(){
        console.log('working');
        $('#canvas').add(`<div class='note'>
        <div id='note_menu'>
            <i class="btn_close fas fa-times"></i>
            <i class="float-right fas fa-bars"></i>
            <textarea class='note_text'></textarea>
        </div>
    </div>`).appendTo('#canvas');
        $('.note').draggable();
    });
    });
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   user-9725874    6 年前

    使用css jQuery将位置固定到类注释。

      $('.note').draggable();
      $('.note').css('position','fixed');
    

    https://codepen.io/anon/pen/XxJyBj