Jquery - Schaltfläche zum Hinzufügen Panel/Schaltfläche zum Entfernen Panel

Wie könnte ich zwei Schaltflächen zu den folgenden hinzufügen? Die erste Schaltfläche würde ein Panel hinzufügen und die zweite würde ein ausgewähltes Panel entfernen.Jquery - Schaltfläche zum Hinzufügen Panel/Schaltfläche zum Entfernen Panel

Die Idee ist, dass ich so viele Panels haben kann, wie ich will und bestimmte entfernen, wenn ich möchte.

<!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>

Quelle

2017-05-17 Luke Toss

Sie könnten 2 Schaltflächen in Ihrem HTML hinzufügen und eine Funktion hinzufügen.

Für hinzufügen fügt es das ziehbare Div an Ihren Körper an. Sie müssen die ID anstelle der Klasse verwenden, um das Element auszuwählen. Hier

ist der Code arbeitet für das Hinzufügen eines ziehbar 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>

Quelle

2017-05-17 14:22:18

Jquery - Schaltfläche zum Hinzufügen Panel/Schaltfläche zum Entfernen Panel

Antwort

Verwandte Themen