我正在使用 html、css、angularJs 和 jQuery 制作一个程序。 我没有接受过 jQuery 或 Angular 方面的培训，所以我正在学习。
想法是让不同的屏幕在浏览器上移动，用户可以将它们移动到他想要的地方所以我使用 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>
`
Angular :
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%;
}
你能告诉我如何解决吗？
最佳答案
将 position: absolute 添加到您的 CSS 中，调整大小后您的框将不会向下移动。
我只建议添加一些默认定位(例如顶部和左侧)，因为如果没有它，它们将在页面加载时一个接一个地显示。
关于javascript - jQuery 的 div 调整大小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38524405/