Javascript jQuery中的div大小调整问题_Javascript_Jquery_Html_Css_Angularjs

Javascript jQuery中的div大小调整问题

javascript jquery html css angularjs

Javascript jQuery中的div大小调整问题,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,我正在使用html、css、angularJs和jQuery制作一个程序。我没有受过jQuery或angular方面的培训，所以我正在学习这个想法是让不同的屏幕在浏览器上移动，用户可以将它们移动到他想要的地方，所以我正在使用但我有一个问题，我找不到如何解决。一旦在div上添加内容或调整其大小，其他div将向下移动（他们认为第一个div由他们决定，因此他们向下移动以允许其增长），这是没有意义的，因为框不在它开始的位置（用户可以证明将其移动到屏幕上的另一个位置）我附加我的代码，您可以看到如

我正在使用html、css、angularJs和jQuery制作一个程序。我没有受过jQuery或angular方面的培训，所以我正在学习

这个想法是让不同的屏幕在浏览器上移动，用户可以将它们移动到他想要的地方，所以我正在使用

但我有一个问题，我找不到如何解决。一旦在div上添加内容或调整其大小，其他div将向下移动（他们认为第一个div由他们决定，因此他们向下移动以允许其增长），这是没有意义的，因为框不在它开始的位置（用户可以证明将其移动到屏幕上的另一个位置）

我附加我的代码，您可以看到如何调整已移动的项目的大小，但仍会移动其初始位置上的项目：

HTML:

}))

CSS:

你能告诉我怎么解决吗？

将

位置：绝对

添加到你的CSS中，调整大小后你的框不会向下移动。

我只建议添加一些默认位置（例如顶部和左侧），因为如果没有它，它们会在页面加载时一个接一个地显示出来。

这就是我使用JSFIDLE测试的方式：这不是您所期望的吗？你能澄清一下什么没有像你期望的那样工作吗？它在JSFIDLE中不工作，angular不能正常工作。您必须在tomcat服务器的本地计算机中使用它。我成功地做到了，这是库之间的冲突，我已通过删除可调整大小的属性并使用您的建议修复了它。谢谢你的帮助。

<html>
    <head>
        <title>T1</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">        
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>      

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script src="angularJs/angularScripts.js"></script>
    <script src="JQuery/"></script>

</head>
<body ng-app="myApp" >


    <div class="program" ng-controller="program">
        <button class="buttonAddItem" ng-click="addItem();">
            item +
        </button> 


        <!-- items -->
        <div class="item" ng-repeat="item in items" >
            <div >
                {{item.name}}
            </div>
        </div>


    </div>
    <script>
        //mover las ventanas
        $(function () {
            $(".item").draggable();
        });
        //cambiar el tamano de las ventanas
        $(function () {
            $(".item").resizable();
        });

    </script>
</body>

var app = angular.module('myApp', []);

app.controller('program', function ($scope) {

$scope.items = [];

$scope.items[0] = {name: "name1"};
$scope.items[1] = {name: "name2"};
$scope.items[2] = {name: "name3"};
$scope.items[3] = {name: "name4"};

$scope.addItem = function ($event) {

    var newItem =  {name: "newItem"};

    $scope.items.push(newItem);
};

$scope.removeMethod = function (id) {

    removeItem($scope.methods, "id", id);
};

var removeItem = function (object, key, value) {
    if (value === undefined)
        return;

    for (var i in object) {
        if (object[i][key] === value) {
            object.splice(i, 1);
        }
    }
};

var getItem = function (object, key, value) {

    if (value === undefined)
        return;

    for (var i in object) {
        if (object[i][key] === value) {
            return object[i];
        }
    }
};

.item{
    border: solid;
    width: 30%;
}