Jquery - パネルを追加するボタン/パネルを削除するボタン

どのように2つのボタンを下に追加できますか？最初のボタンはパネルを追加し、2番目のボタンは選択したパネルを削除しますか？Jquery - パネルを追加するボタン/パネルを削除するボタン

アイデアは、私が望むだけ多くのパネルを持ち、あるものを取り除くことができます。

<!DOCTYPE HTML> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<html lang="en"> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> 
<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $('#drag').resizable({ 
      stop: function(event, ui) { 
       var w = $(this).width(); 
       var h = $(this).height(); 
      } 
     }).draggable(
      { 
       containment: $('body'), 
       drag: function(){ 
        var offset = $(this).offset(); 
        var xPos = offset.left; 
        var yPos = offset.top; 
        $('#posX').text('x: ' + xPos); 
        $('#posY').text('y: ' + yPos); 
       }, 
       stop: function(){ 
        var finalOffset = $(this).offset(); 
        var finalxPos = finalOffset.left; 
        var finalyPos = finalOffset.top; 
      $('#finalX').text('Final X: ' + finalxPos); 
      $('#finalY').text('Final X: ' + finalyPos); 
       } 
      }); 
    }); 
</script> 
<style type="text/css"> 
    #drag { 
     width: 16em; 
     height: 16em; 
     padding: 0.5em; 
     border: 3px solid #000; 
     background-color: #fff; 
     background-color: rgba(255,255,255,0.5); 
    } 
</style> 
</head> 
<body> 
    <div id="drag" class="panel panel-default"> 
    <div class="panel-body">Dragable & Sizable</div> 
    </div> 
</body> 
</html>

出典

2017-05-17 Luke Toss

HTMLに2つのボタンを追加して機能を追加できます。

追加すると、ドラッグ可能なdivが本体に追加されます。要素を選択するには、クラスの代わりにIDを使用する必要があります。ここで

は、ドラッグ可能なdiv要素を追加するための作業のコードです：

<!DOCTYPE HTML> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <html lang="en"> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> 
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> 
     <script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
       $("#add").click(function() { 
        $("body").append("<div class=\"drag panel panel-default\"><div class=\"panel-body\">Draggable & Sizable</div></div>"); 
        $(".drag").resizable({ 
         stop: function(event, ui) { 
          var w = $(this).width(); 
          var h = $(this).height(); 
         } 
        }).draggable(
         { 
          containment: $('body'), 
          drag: function(){ 
           var offset = $(this).offset(); 
           var xPos = offset.left; 
           var yPos = offset.top; 
           $('#posX').text('x: ' + xPos); 
           $('#posY').text('y: ' + yPos); 
          }, 
          stop: function(){ 
           var finalOffset = $(this).offset(); 
           var finalxPos = finalOffset.left; 
           var finalyPos = finalOffset.top; 
           $('#finalX').text('Final X: ' + finalxPos); 
           $('#finalY').text('Final X: ' + finalyPos); 
          } 
         }); 
       }); 

      }); 
     </script> 
     <style type="text/css"> 
      .drag { 
       width: 16em; 
       height: 16em; 
       padding: 0.5em; 
       border: 3px solid #000; 
       background-color: #fff; 
       background-color: rgba(255,255,255,0.5); 
      } 
     </style> 
    </head> 
    <body> 
    <button id="add">Add</button> 
    <button id="hide">Hide</button> 
    </body> 
    </html>

出典

2017-05-17 14:22:18

Jquery - パネルを追加するボタン/パネルを削除するボタン

答えて

関連する問題