Question

我正在使用html，css，angularJs和jQuery创建一个程序。我没有受过jQuery的训练，也没有角色，所以我正在学习。

我们的想法是让不同的屏幕在浏览器上移动，用户可以将它们移动到他想要的位置，这样我就可以使用http://jqueryui.com/draggable/。

但我有一个问题，我找不到如何解决。一旦你在div上添加内容或调整其大小，其他div就会向下移动（他们认为第一个div取决于他们，所以他们向下移动以允许他成长）这没有任何意义，因为盒子不在它开始的地方（用户可以证明将其移动到屏幕上的另一个地方）。

我附上了我的代码，你可以看到你移动的项目的调整大小仍然会移动它的初始位置：

HTML：

<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];
        }
    }
};

}）;

CSS：

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

你能告诉我怎么解决吗？

Answer 1

将position: absolute添加到您的CSS中，调整大小后您的框不会向下移动。我只建议添加一些默认定位（例如top＆amp; left），因为没有它，它们会在页面加载时一个接一个地显示。

div调整jQuery的问题

1 个答案: