Javascript Jquery-添加面板的按钮/删除面板的按钮_Javascript_Jquery

Javascript Jquery-添加面板的按钮/删除面板的按钮

javascript jquery

Javascript Jquery-添加面板的按钮/删除面板的按钮,javascript,jquery,Javascript,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.go

如何在下面添加两个按钮？第一个按钮将添加面板，第二个按钮将删除选定的面板

我的想法是，我可以有许多面板，我想和删除某些如果我愿意

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


$（文档）.ready（函数（）{
$（'#拖动'）。可调整大小({
停止：功能（事件、用户界面）{
var w=$（this.width（）；
var h=$（this.height（）；
}
}).拖拉(
{
包含：$（“主体”），
拖动：函数（）{
var offset=$（this.offset（）；
var xPos=offset.left；
var yPos=offset.top；
$（'#posX'）.text（'x:'+xPos）；
$（'#posY'）.text（'y:'+yPos）；
},
停止：函数（）{
var finalOffset=$（this.offset（）；
var finalxPos=finalOffset.left；
var finalyPos=finalOffset.top；
$（'finalX'）.text（'Final X:'+finalxPos）；
$（'finalY'）.text（'finalx:'+finalyPos）；
}
});
});
#拖{
宽度：16em；
高度：16em；
填充：0.5em；
边框：3倍实心#000；
背景色：#fff；
背景色：rgba（255255,0.5）；
}
可拖动和可调节

您可以在HTML中添加两个按钮并附加一个函数

对于add，它将可拖动div附加到您的主体中。您必须使用ID而不是class来选择元素

下面是用于添加可拖动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>


$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
$（“body”）。追加（“Draggable&sizeable”）；
$（“.drag”）。可调整大小({
停止：功能（事件、用户界面）{
var w=$（this.width（）；
var h=$（this.height（）；
}
}).拖拉(
{
包含：$（“主体”），
拖动：函数（）{
var offset=$（this.offset（）；
var xPos=offset.left；
var yPos=offset.top；
$（'#posX'）.text（'x:'+xPos）；
$（'#posY'）.text（'y:'+yPos）；
},
停止：函数（）{
var finalOffset=$（this.offset（）；
var finalxPos=finalOffset.left；
var finalyPos=finalOffset.top；
$（'finalX'）.text（'Final X:'+finalxPos）；
$（'finalY'）.text（'finalx:'+finalyPos）；
}
});
});
});
.拖{
宽度：16em；
高度：16em；
填充：0.5em；
边框：3倍实心#000；
背景色：#fff；
背景色：rgba（255255,0.5）；
}
添加
隐藏

您可以在HTML中添加两个按钮并附加一个函数

对于add，它将可拖动div附加到您的主体中。您必须使用ID而不是class来选择元素

下面是用于添加可拖动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>


$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
$（“body”）。追加（“Draggable&sizeable”）；
$（“.drag”）。可调整大小({
停止：功能（事件、用户界面）{
var w=$（this.width（）；
var h=$（this.height（）；
}
}).拖拉(
{
包含：$（“主体”），
拖动：函数（）{
var offset=$（this.offset（）；
var xPos=offset.left；
var yPos=offset.top；
$（'#posX'）.text（'x:'+xPos）；
$（'#posY'）.text（'y:'+yPos）；
},
停止：函数（）{
var finalOffset=$（this.offset（）；
var finalxPos=finalOffset.left；
var finalyPos=finalOffset.top；
$（'finalX'）.text（'Final X:'+finalxPos）；
$（'finalY'）.text（'finalx:'+finalyPos）；
}
});
});
});
.拖{
宽度：16em；
高度：16em；
填充：0.5em；
边框：3倍实心#000；
背景色：#fff；
背景色：rgba（255255,0.5）；
}
添加
隐藏